<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>
js中div循环转动的动画代码
最新推荐文章于 2024-06-26 09:50:30 发布