简单地震效果
刚才用支付宝还信用卡的时候,看见页面“抖”了一下。觉得挺有趣的,于是自己也写个简单的小效果。
利用padding-left 和padding-right来让页面移动,产生抖的感觉。
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> *{margin:0;padding:0;} #box{width:898px;margin:30px auto 0;} #box p{line-height:24px;} #box img{display:block;} </style> </head> <body> <div id="box"> <p>请稍等片刻</p> <img src="http://img5.cache.netease.com/photo/0001/2012-12-14/900x600_8IMBTBDQ4T8E0001.jpg"> </div> <script type="text/javascript"> var oBox = document.getElementById("box"); var iTimer = null; var iNum = 20; function shock(){ if(iNum>=0){ oBox.style.padding = 0; if(iNum%2 ==0){ oBox.style.paddingLeft = iNum + "px"; }else{ oBox.style.paddingRight = iNum + "px"; } iNum -=1; iTimer = setTimeout(shock,15); }else{ clearTimeout(iTimer); } } iTimer = setTimeout(shock,5000); </script> </body> </html>
转载请注明出处,谢谢!http://www.cnblogs.com/kendyjack/archive/2012/12/14/2818686.html
转载请注明原地址:http://www.cnblogs.com/kendyjack/