js实现图片,盒子抖动

15138551395
15138551395 发布于 2017-01-11 17:48:17 浏览:313 类型:原创 - 随笔 分类:JavaScript - js 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style>
                    body{
                            margin:0px;padding:0px;
                            background:darkcyan;
                    }
                    .box{
                            width:100px;
                            height:100px;
                            position:relative;
                            margin:200px auto;
                    }
                        .shake{
                                width:100px;
                                height:100px;
                                position:absolute;
                                background:black;
                                color:white;
                                text-align:center;
                                line-height:100px;
                                font-size:20px;
                                left:0px;right:0px;
                                border-radius:5px;
                        }
                </style>
        </head>
        <script>
                window.onload=function(){
                        var shake=document.getElementsByClassName("shake")[0];
                        function getStyle(obj,attr){
                                return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
                        }
                        function allfunction(newobj,thisobj){
                                newobj.onclick=function(){
                                        var arr=[];
                                        for(var i=20;i>0;i-=2){
                                                arr.push(i,-i);
                                        };
                                        arr.push( 0 );       
                                        var num=0;
                                        var times=null;
                                        var distance = parseInt( getStyle(thisobj,"left") );
                                        clearInterval( times );
                                        times=setInterval(function(){
                                                thisobj.style.left=distance+arr[num]+"px";
                                                num++;
                                                if(num==arr.length){
                                                        clearInterval( times );
                                                }
                                        },50)
                            }
                        }
                        allfunction(document,shake);
                }
        </script>
        <body>
                <div class="box">
                        <div class="shake">
                                点击屏幕
                        </div>
                </div>
        </body>
</html>
标签:
z
给个赞 0 人点赞
收藏 1 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
15138551395 15138551395 作者

web

作者最新