zoukankan      html  css  js  c++  java
  • js实现固定滑动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    *{margin:0px auto; padding:0px;}
    #wai{width:1000px; height:500px; margin-top:50px;}
    #zuobian{ height:500px; background-color:#C66; float:left}
    #youbian{ height:500px; background-color:#F99; float:left;}
    #anniu{width:50px; height:50px; background-color:#3F3; position:relative; margin-left:0px; top:225px; }
    
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body>
    <div id="wai">
    <div id="zuobian" style="200px;"></div>
    <div id="youbian" style="800px;"></div>
    <div id="anniu" style="left:175px;"></div>
    </div>
    </body>
    <script type="text/javascript">
    var anniu = document.getElementById("anniu");
    var ids;
    anniu.onclick=function(){
        ids = window.setInterval("yidong()",5);
        }
        function yidong(){
            var zuobian = document.getElementById("zuobian");
            var youbian = document.getElementById( "youbian");
            var anniu = document.getElementById( "anniu");
            var zb = parseInt (zuobian.style.width);
            var yb = parseInt (youbian.style.width);
            var an = parseInt (anniu.style.left);
            if(zb<800){
                zb++;
                yb--;
                an++;
                }else{
                    window.clearInterval(ids);
                    }
            
            zuobian.style.width = zb+"px";
            youbian.style.width = yb+"px";
            anniu.style.left = an+"px";
            }
    </script>
    </html>

  • 相关阅读:
    博客备份小工具3
    博客转发小工具1
    04-属性选择器
    05-伪类选择器
    03-高级选择器
    02-css的选择器
    01-css的引入方式
    函数进阶-(命名空间、作用域、函数嵌套、作用域链、函数名本质、闭包)
    函数基础-(引子、定义函数、调用函数、函数返回值、函数参数)
    Python之路【第08章】:Python函数
  • 原文地址:https://www.cnblogs.com/palpitate/p/8891135.html
Copyright © 2011-2022 走看看