JavaScript-滑动效果

Posted on 2017-12-08 16:32  神笔码农  阅读(200)  评论(0)  编辑  收藏  举报 
<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ width:1000px; height:500px}
#left{ height:500px; background-color:red; float:left}
#right{ width:800px; height:500px; background-color:blue; float:left}
#btn{ width:50px; height:50px; background-color:#000; position:relative; margin-left:0px;  top:225px}
</style>
</head>

<body> 
    <div id="wai">
    <!--想要获得“left”“right”“btn”的属性，必须用内联样式-->
        <div id="left" style=" width:200px;"></div>
        <div id="right" style=" width:800px;"></div>
        <div id="btn" style="left:175px;"></div>
    </div>
</body>
<script type="text/javascript">
    //给“btn”加点击事件，点击移动（每隔一定时间移动1px）
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        window.setInterval("yidong()",10);
    }
    //定义移动方法：
    function yidong(){
        var left = document.getElementById("left");
        var right = document.getElementById("right");
        var btn = document.getElementById("btn");
        
        var lw = parseInt(left.style.width);
        var rw = parseInt(right.style.width);
        var bl = parseInt(btn.style.left);
        
        var clear;
        if(lw<800){     //当“left”的宽度到800时，停止继续+1，clearInterval
            lw++;
            rw--;
            bl++;
        }else{
            window.clearInterval(clear);
        }
        
        left.style.width = lw+"px";
        right.style.width = rw+"px";
        btn.style.left = bl+"px";
        
    }
</script>