js中div循环转动的动画代码

来源：互联网发布：俄罗斯方块c语言程序编辑：程序博客网时间：2024/06/05 17:18
<style>        *{            margin: 0;            padding: 0;        }        #diva{            width: 100%;            height: 50px;            position: absolute;            background: blue;        }        #divb{            width: 100%;            position: absolute;            height: 50px;            background: pink;        }        #divc{            width: 100%;            position: absolute;            height: 50px;            background: yellow;        }    </style></head>    <body>    <div id="diva"></div>    <div id="divb"></div>    <div id="divc"></div>    </body>    <script src="js.js"></script>    <script src="tweenEvent.js"></script>    <script>        var diva=document.getElementById("diva");        var divb=document.getElementById("divb");        var divc=document.getElementById("divc");        var bWidth=utils.win("clientWidth");        //css这个方法可以访问属性，也可以设置属性，当第二个参数直接是属性的时候就是访问属性        //当第二个参数是键值对的时候，就是改变属性；        utils.css(diva,{"width":bWidth});        utils.css(divb,{"width":bWidth});        utils.css(divc,{"width":bWidth});        utils.css(diva,{left:0});        utils.css(divb,{left:-bWidth});        utils.css(divc,{left:-2*bWidth});        setInterval(function(){            diva.style.left=diva.offsetLeft+2+"px";            if(diva.offsetLeft==bWidth){                diva.style.left=-2*bWidth+"px";            }            divb.style.left=divb.offsetLeft+2+"px";            if(divb.offsetLeft==bWidth){                divb.style.left=-2*bWidth+"px";            }            divc.style.left=divc.offsetLeft+2+"px";            if(divc.offsetLeft==bWidth){                divc.style.left=-2*bWidth+"px";            }        },30)    </script>
0 0