图片每隔5秒抖动

最新推荐文章于 2021-06-04 06:32:15 发布

诸葛苍穹

最新推荐文章于 2021-06-04 06:32:15 发布

阅读量926

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/u012260672/article/details/50730808

版权

javaScript 专栏收录该内容

131 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>抖动</title>
    <style>
        *{margin:0; padding:0;}
        div#div1{ width:200px; height:200px; background:url(http://tech.cncms.com/tech/UploadPic/2010-9/201098203819645.gif); position:absolute; left:0; top:0; margin:100px; color:white; }
    </style>

    <script>
    window.onload = function (){

        var arr = [];
        for(var i =10; i>=0; i=i-2){  //产生数组arr = [10,-10,08,-08,....,0]
            arr.push(i);
            arr.push(-i);
        }


        var oDiv = document.getElementById('div1');

        function dou() { //抖动函数
            var i = 0;
            var timer = setInterval(function (){

                    if(i>=arr.length){
                        clearInterval(timer);
                    }
                    oDiv.style.left = arr[i] + 'px'; //根据arr数组定时修改div的left值。
                    oDiv.style.top = arr[i] + 'px'; //根据arr数组定时修改div的top值。
                    i=i+1;

            },30);


        }

        setInterval(dou,5000); //每5s执行抖动函数。


    };
    </script>
</head>
<body>
    <div id="div1">广告每5S抖动一次</div>
</body>
</html>

诸葛苍穹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片每隔5秒抖动

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>抖动</title> <style> *{margin:0; padding:0;} div#div1{ wi
复制链接

扫一扫

专栏目录