zoukankan      html  css  js  c++  java
  • 无缝连续滚动

    1.简单的无缝连续滚动

    原来:页面上是6个图片,编号012345,复制一倍在后面,长长的火车在来回移动。

    <!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" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>Document</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            ul{
                list-style:none;
            }
            .rolling{
                width:800px;
                height:130px;
                border:10px solid #000;
                margin:50px auto;
                position:relative;
                overflow:hidden;
    
            }
            .rolling .m_unit{
                width:5000px;
                position:absolute;
                top:0;
                left:0;
            }
            .rolling ul li{
                float:left;
                margin-right:10px;
            }
        </style>
    </head>
    <body>
       <div class="rolling" id="rolling">
           <div class="m_unit" id="m_unit">
               <ul>
                   <li><a href="###"><img  src="images/shuzi/0.png" /></a></li>
                   <li><a href="###"><img  src="images/shuzi/1.png" /></a></li>
                   <li><a href="###"><img  src="images/shuzi/2.png" /></a></li>
                   <li><a href="###"><img  src="images/shuzi/3.png" /></a></li>
                   <li><a href="###"><img  src="images/shuzi/4.png" /></a></li>
                   <li><a href="###"><img  src="images/shuzi/5.png" /></a></li>
               </ul>
           </div>
       </div>
    
    </body>
    </html>
    <script type="text/javascript">
         var rolling=document.getElementById('rolling');
         var m_unit=document.getElementById('m_unit');
         var listul=m_unit.getElementsByTagName('ul')[0]; //获取ui
         var listlength=m_unit.getElementsByTagName('li').length; //获取li的长度
         listul.innerHTML+=listul.innerHTML; // 复制一倍的li标签
         var timer; //存定时器
         var nowleft=0;
         var zhefandian = -210*listlength;
         //鼠标移入大盒子的时候停止定时器
         rolling.onmouseenter=function(){
          clearInterval(timer);
         }
         rolling.onmouseleave=function(){
          move();
         }
    
        function move(){
            timer=setInterval(function (){
                nowleft-=3;
                if(nowleft<zhefandian){
                    nowleft=0;
                }
                m_unit.style.left=nowleft+'px';
            },10)
        }
        move();
    
    
    
    
    
    </script>

    2.高级无缝滚动

    HTML结构中重复的代码,用js动态的添加。

    ②折返点:不要自己计算,要通过页面加载效果自动获取宽度,折返点的宽度应该等于ul内部所有里元素宽度的一半。方法:li不要添加宽度,浮动的元素被img自动撑宽,ul也不要加宽度,绝对定位的元素用内部的li元素撑宽。

    解决方法有两种:

    方法1:遍历前半部分(复制一倍之前)所有li,进行宽度累加,累加之后就是折返点。

    上午学offsetWidth,但是这个方法不带margin。所以累加的时候,要得到计算后的margin麻烦,所以不考虑方法1

    方法2:折返点就是假火车第一张图的offsetLeft值,所以,如果原理的li个数是liLength,那么假火车的第一张图就是listLength[length]

    <!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" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>Document</title>
        <style type="text/css">
               *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
            }
            .rolling{
                width: 800px;
                height: 130px;
                border: 10px solid #ccc;
                margin: 100px auto;
                position: relative;
                overflow: hidden;
            }
            .rolling .m_unit{
                /*这是运动的单位*/
                /*这个宽度足以致命,为了让所有的li能够并排*/
                /*这个宽度随便取,大一点*/
                width: 5000px;
                position: absolute;
                top: 0;
                left: 0;
            }
            .rolling ul li{
                float: left;
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
            <div class="rolling" id="rolling">
            <div class="m_unit" id="m_unit">
                <ul>
                    <li><a href=""><img src="images/shuzi/0.png" /></a></li>
                    <li><a href=""><img src="images/shuzi/1.png" /></a></li>
                    <li><a href=""><img src="images/shuzi/2.png" /></a></li>
                    <li><a href=""><img src="images/shuzi/3.png" /></a></li>
                    <li><a href=""><img src="images/shuzi/pangzi.png" /></a></li>
                    <li><a href=""><img src="images/shuzi/4.png" /></a></li>
                    <li><a href=""><img src="images/shuzi/5.png" /></a></li>
                </ul>
            </div>
        </div>
    
    </body>
    </html>
    <script type="text/javascript">
         var rolling =document.getElementById('rolling');
         var m_unit =document.getElementById('m_unit');
         var ullist=m_unit.getElementsByTagName('ul')[0] ; //获取ul
         var lis=m_unit.getElementsByTagName('li'); //获取所有li
         var imgs=m_unit.getElementsByTagName('img'); //获取所有img
       ullist.innerHTML+=ullist.innerHTML; //复制一份ul
       var lislength=lis.length; // 获取所以li的长度,包括新的
       var timer; //存定时器
       var nowleft=0; //定义全局信号量,接收left的运动值。
       var zhefandian;
       //要计算折返点,但每个li宽度不一样,所以假火车开头元素的offsetLef  t就是折返点,这个元素是lis/2
         //但是由于Chrome的机理,如果要读取offsetLeft值必须保证所有图片加载完毕
       var count=0; //图片计数器
       for(var i=0; i<imgs.length; i++){
        imgs[i].onload=function(){
            count++;
            if(count == imgs.length){
                zhefandian=lis[lislength/2].offsetLeft;
            }
        }
       }
    
       rolling.onmouseenter=function(){
          clearInterval(timer);
       }
    
      rolling.onmouseleave=function(){
           move();
       }
    
    
       function move(){
        timer=setInterval(function(){
            nowleft-=3;
            if(nowleft < -zhefandian){
                nowleft=0;
            }
             m_unit.style.left= nowleft+'px';
        },10)
       }
       move();
    
    </script>
  • 相关阅读:
    A Simple Problem with Integers poj 3468 多树状数组解决区间修改问题。
    Fliptile 开关问题 poj 3279
    Face The Right Way 一道不错的尺取法和标记法题目。 poj 3276
    Aggressive cows 二分不仅仅是查找
    Cable master(二分题 注意精度)
    B. Pasha and String
    Intervals poj 1201 差分约束系统
    UITextField的快速基本使用代码块
    将UIImage转换成圆形图片image
    color转成image对象
  • 原文地址:https://www.cnblogs.com/smivico/p/7799382.html
Copyright © 2011-2022 走看看