简单地震效果
简单地震效果<div id="cnblogs_post_body">刚才用支付宝还信用卡的时候，看见页面&ldquo;抖&rdquo;了一下。觉得挺有趣的，于是自己也写个简单的小效果。
利用padding-left 和padding-right来让页面移动，产生抖的感觉。
<div class="cnblogs_code"><!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>
页:
[1]