js练习 滑动效果

点击黄色按钮，当按钮在左侧，点击后从左向右滑动；当按钮在右侧，点击后从右向左滑动

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    *{ margin:0 auto; padding:0;}
    #wai{ width:1000px; height:400px; margin-top:50px;}
    #left{ height:400px; background-color:#F00; float:left;}
    #right{ height:400px; background-color:#00F; float:left;}
    #btn{ width:50px; height:50px; background-color:#FF0; margin-left:0; position:relative; top:175px;}
</style>
</head>

<body>
    <div id="wai">
        <div id="left" style="width:200px;"></div>
        <div id="right" style="width:800px;"></div>
        <div id="btn" style="left:175px"></div>
    </div>
</body>
</html>
<script type="text/javascript">
    var btn = document.getElementById("btn");
    var l = document.getElementById("left");
    var r = document.getElementById("right");
    /*
        按钮在左侧点击从左向右滑动，按钮在右侧点击从右向左滑动
    */
    btn.onclick = function()
    {
        if(parseInt(l.style.width=200))
        {
            bianZuo();
        }
        if(parseInt(l.style.width=800))
        {
            bianYou();
        }
    }
    
    /*
        从左向右滑动
    */
    function bianZuo()
    {
        var lw = parseInt(l.style.width);
        var rw = parseInt(r.style.width);
        var btnl = parseInt(btn.style.left);
            lw++;
            rw--;
            btnl++;
        l.style.width = lw+"px";
        r.style.width = rw+"px";
        btn.style.left = btnl+"px";
        if(lw<800)
        {
            window.setTimeout("bianZuo()",5);
        }
    }
    
    /*
        从右向左滑动
    */
    function bianYou()
    {
        var lw = parseInt(l.style.width);
        var rw = parseInt(r.style.width);
        var btnl = parseInt(btn.style.left);
            lw--;
            rw++;
            btnl--;
        l.style.width = lw+"px";
        r.style.width = rw+"px";
        btn.style.left = btnl+"px";
        if(lw>200)
        {
            window.setTimeout("bianYou()",5);
        }
    }

</script>

效果 

 

posted @ 2017-12-08 13:58  黑山大胖子  阅读(227)  评论(0)  编辑  收藏  举报