zoukankan      html  css  js  c++  java
  • 滑动效果

    滑动效果:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    *{margin:0px auto; padding:0px;}
    #wai{ 1000px; height:500px; margin-top:30px;}
    #left{ height:500px; background-color:#F00; float:left}
    #right{height:500px; background-color:#0F0; float:left}
    #btn{ 50px; height:50px; background-color:#00F; position:relative; margin-left:0px; top:225px; }
    </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 st;
    btn.onclick = function()
    {
        st = window.setInterval("jia()",10)
        
        }
    function jia()
    {
        var left = document.getElementById("left");
        var right = document.getElementById("right");
        var btn = document.getElementById("btn");
        var rwidth = parseInt(right.style.width);
        var lwidth = parseInt(left.style.width);
        var lbtn = parseInt(btn.style.left);
        if(lwidth<1000){
            lwidth++;
            rwidth--;
            lbtn++;
            btn.style.left=lbtn+"px";
            left.style.width=lwidth+"px";
            right.style.width=rwidth+"px";
            }else{ window.clearInterval(st);}
        }
    </script>

    效果图:

  • 相关阅读:
    Django安装与创建项目
    siege 高并发测试工具
    http_load 高并发测试
    webbench高并发测试
    scss切页面
    切页面
    小程序scss页面布局
    rtrim
    modal结合art-template
    Python 正则表达式
  • 原文地址:https://www.cnblogs.com/Whitehat/p/8125459.html
Copyright © 2011-2022 走看看