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

<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循环转动的动画代码)