zoukankan html css js c++ java

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>

效果

查看全文

相关阅读:
xfs(dm-3):please umount the filesystem and rectify the problem(s)
解决 pcre-8.35 make[2]: *** [aclocal.m4] Error 127
redis-4.0.6 编译安装
 nginx出错：rewrite or internal redirection cycle
17个技巧
 go-fastdfs/go-fastdfs-web
Win X86 时间同步
 关闭或启动linux防火墙后，docker启动容器报错问题解决方式
 Nginx 重定向 443
Docker 容器和宿主机相互拷贝文件

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

js练习 滑动效果

js练习滑动效果