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="200px;"></div>
        <div id="right" style="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>

效果

相关阅读:
学生管理系统代写
学生竞赛评价系统
《划时代51单片机C语言全新教程》前言
《划时代51单片机C语言全新教程》第三章开发环境概览
校验和
NBOOT分析－S3C244xInit.s（1）
《划时代51单片机C语言全新教程》第一章 8051简介概览
《划时代51单片机C语言全新教程》第二章 STC89C52RC 处理器概览
ARM9中断调试（1）
NBOOT分析－NBOOT.c（2）

原文地址：https://www.cnblogs.com/zxbs12345/p/8005074.html

js练习 滑动效果

js练习滑动效果