| 标题 | jQuery晃动层特效实现方法 |
| 内容 | 这篇文章主要介绍了jQuery晃动层特效实现方法,实例分析了animate方法与css样式的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jQuery晃动层特效实现方法。分享给大家供大家参考。具体实现方法如下： 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <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程序设计有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。