简单地震效果

最新推荐文章于 2024-08-12 09:24:46 发布

weixin_30293135

最新推荐文章于 2024-08-12 09:24:46 发布

阅读量75

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/kendyjack/archive/2012/12/14/2818686.html

版权

刚才用支付宝还信用卡的时候，看见页面“抖”了一下。觉得挺有趣的，于是自己也写个简单的小效果。

利用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

转载于:https://www.cnblogs.com/kendyjack/archive/2012/12/14/2818686.html

weixin_30293135

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单地震效果

刚才用支付宝还信用卡的时候，看见页面“抖”了一下。觉得挺有趣的，于是自己也写个简单的小效果。利用padding-left 和padding-right来让页面移动，产生抖的感觉。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x...
复制链接

扫一扫