jQuery晃动层特效实现方法
本文实例讲述了jQuery晃动层特效实现方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;"charset="utf-8"/> <title>jQuery晃动层</title> <styletype="text/css"> body{font:12pxGeorgia,serif;} a{text-decoration:none;} #header{margin:50pxauto} #headerp{text-align:center;font-size:16px;font-weight:bold} #box{width:400px;height:200px;background-color:#ccc;text-align:center} </style> <scripttype="text/javascript"src="js/jquery-1.6.2.min.js"></script> <scripttype="text/javascript"> varbox_left=0; $(document).ready(function(){ box_left=($(window).width()-$('#box').width())/2; $('#box,#footer').css({'left':box_left,'position':'absolute'}); }); functionshock() { 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(){ //shockend }); }); }); }); } } </script> </head> <body> <divid="header"> <p>仿wp后台登录错误时左右晃动某一层</p> </div> <divid="box"><ahref="#"onclick="shock();returnfalse;">单击我查看效果</a></div> </body> </html>
希望本文所述对大家的jQuery程序设计有所帮助。