zoukankan      html  css  js  c++  java
  • 无缝循环滚动

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
      
      
      <wraper>
          <ul id="ul">
            <li>AA</li>
            <li>BB</li>
            <li>CC</li>
            <li>DD</li>
            <li>EE</li>
            <li>FF</li>
            <li>AA</li>
                    <li>BB</li>
            <li>CC</li
                <li>DD</li>
            <li>EE</li>
        </ul>
            
      </wraper>
    </body>
    </html>
    wraper{
      display:block;
      background-color:red;
      width:200px;
      overflow:hidden;
      position:relative;
      height:100px;
    }
    
    
    ul{
      width:490px;
      position:absolute;
      left:0px;
      right:0px;
      top:0px;
      height:20px;
      bottom:20px;
      display:block;
    }
    li{
      float:left;
      width:45px;
    }
    var x=document.getElementById('ul');
    
    setInterval(function(){
      var left=x.style.left.replace('px','');
      if(left<-290)
        {
          left=-30;
        }
      x.style.left=left-10+'px';
    },100);

    JS Bin on jsbin.com

  • 相关阅读:
    愤怒的小鸟(angry bird )
    1101模拟
    1029模拟题解
    1028题解
    图床
    数据结构
    博弈论
    差分
    前缀和
    快读和快写
  • 原文地址:https://www.cnblogs.com/zyip/p/5541053.html
Copyright © 2011-2022 走看看