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

     1 <html xmlns="http://www.w3.org/1999/xhtml">
     2 <head>
     3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     4 <title>无标题文档</title>
     5 <style type="text/css">
     6    *{ margin:0px auto; padding:0px}
     7    #wai{ width:100%; height:200px;}
     8    #left{height:200px; background-color:#63C; float:left}
     9    #right{ height:200px; background-color:#FC3; float:left}
    10    #anniu{ width:50px; height:50px; background-color:#06F; position:absolute; top:120px; z-index:10; }
    11    #anniu:hover{ cursor:pointer}
    12 </style>
    13 </head>
    14  
    15 <body>
    16  </br></br>
    17 <div id="wai">
    18     <div id="left" style="200px"></div>
    19     <div id="right" style="600px"></div>
    20 </div>
    21  
    22 <div id="anniu" style="left:175px" onclick="hua()"></div>
    23  
    24 <script type="text/javascript">
    25  
    26 var id;
    27  
    28 function hua()
    29 {
    30     id = window.setInterval("dong()",10);
    31 }
    32  
    33 //滑动的方法,调一次滑动3px
    34 function dong()
    35 {
    36     //改蓝色的宽度 200px
    37     var zuo = document.getElementById("left");
    38     kd = zuo.style.width;
    39      
    40     if(parseInt(kd.substr(0,kd.length-2))>=600)
    41     {
    42         window.clearInterval(id);
    43         return;
    44     }
    45      
    46     kd = parseInt(kd.substr(0,kd.length-2))+3;
    47     zuo.style.width = kd+"px";
    48      
    49     //改黄色的宽度
    50     var you = document.getElementById("right");
    51     ykd = you.style.width;
    52     ykd = parseInt(ykd.substr(0,ykd.length-2))-3;
    53     you.style.width = ykd+"px";
    54      
    55     //改小块的left
    56     var hong = document.getElementById("anniu");
    57     hleft = hong.style.left;
    58     hleft = parseInt(hleft.substr(0,hleft.length-2))+3;
    59     hong.style.left = hleft+"px";
    60      
    61      
    62 }
    63  
    64 </script>
    65 
    66 </body>
    67 </html>
  • 相关阅读:
    关于分析web.xml的一篇博客,写的很详细
    (转)Java编译后产生class文件的命名规则
    Standard 1.1.x VM与Standard VM的区别
    throws和throw的用法例子以及检测和非检查异常
    终端IO(上)
    [APUE]进程关系(下)
    [APUE]进程关系(上)
    [APUE]进程控制(下)
    [APUE]进程控制(中)
    深究标准IO的缓存
  • 原文地址:https://www.cnblogs.com/aqxss/p/6180365.html
Copyright © 2011-2022 走看看