jQuery晃动层特效实现方法
2015-03-09 00:00
621 查看
本文实例讲述了jQuery晃动层特效实现方法。分享给大家供大家参考。具体实现方法如下:
希望本文所述对大家的jQuery程序设计有所帮助。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;" charset="utf-8" /> <title>jQuery晃动层</title> <style type="text/css"> body { font: 12px Georgia, serif; } a { text-decoration: none; } #header{margin:50px auto} #header p{text-align:center;font-size:16px;font-weight:bold} #box{width:400px;height:200px;background-color:#ccc;text-align:center} </style> <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> <script type="text/javascript"> var box_left = 0; $(document).ready(function () { box_left = ($(window).width() - $('#box').width()) / 2; $('#box,#footer').css({'left': box_left, 'position':'absolute'}); }); function shock() { for (i = 1; i < 7; i++) { $('#box').animate({ 'left': '-=15' }, 3, function() { $(this).animate({ 'left': '+=30' }, 3, function() { $(this).animate({ 'left': '-=15' }, 3, function() { $(this).animate({ 'left': box_left }, 3, function() { // shock end }); }); }); }); } } </script> </head> <body> <div id="header"> <p>仿wp后台登录错误时左右晃动某一层</p> </div> <div id="box"><a href="#" onclick="shock();return false;">单击我查看效果</a></div> </body> </html>
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章推荐
- jQuery晃动层特效实现方法
- jquery实现多屏多图焦点图切换特效的方法
- jQuery实现页面内锚点平滑跳转特效的方法总结
- jquery比较简洁的软键盘特效实现方法
- jquery实现多屏多图焦点图切换特效的方法
- jQuery实现DIV层淡入淡出拖动特效的方法
- jQuery团购倒计时特效实现方法
- jQuery实现DIV层淡入淡出拖动特效的方法
- JQUERY实现网页右下角固定位置展开关闭特效的方法
- jQuery实现页面内锚点平滑跳转特效的方法总结
- jQuery网页定位导航特效实现方法
- jQuery实现页面内锚点平滑跳转特效的方法总结
- JQuery常见特效实现方法
- JQUERY实现网页右下角固定位置展开关闭特效的方法
- jQuery实现3D文字特效的方法
- jQuery团购倒计时特效实现方法
- jQuery实现3D文字特效的方法
- jQuery-ui中自动完成实现方法
- JQuery实现的在新窗口打开链接的方法小结
- 使用jquery的load()方法实现页面局部刷新