• 无缝滚动


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .roll{position: relative;}
    .wrap ul{position: absolute; left: 0px; top: 0px; }
    .wrap ul li{}
    </style>
    <script type="text/javascript">
    window.onload=function(){
    var oDiv=document.getElementById('roll');
    var oUl=oDiv.getElementsByTagName('ul')[0];
    var aLi=oUl.getElementsByTagName('li');
    oUl.innerHTML+=oUl.innerHTML;
    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
    /*
    //一直向右滚动
    setInterval(function(){
    oUl.style.left=oUl.offsetLeft+5+'px';

    if(oUl.offsetLeft>oUl.offsetWidth/2){
    oUl.style.left='0px';
    }
    },30);

    //一直向左滚动
    setInterval(function(){
    oUl.style.left=oUl.offsetLeft-5+'px';

    if(oUl.offsetLeft<-oUl.offsetWidth/2){
    oUl.style.left='0px';
    }
    },30);
    */


    //上下无缝滚动

    setInterval(function(){
    oUl.style.top=oUl.offsetTop+5+'px';

    if(oUl.offsetTop <= - oUl.offsetHeight / 2){
    oUl.style.top = '0';
    }else if(oUl.offsetTop >= 0){
    oUl.style.top = - oUl.offsetHeight / 2 + 'px';
    };

    },300);
    //主要利用offsetLeft或offsetTop求得左边或上下的距离 然后复制一份原来的 走到一半的时候拉过来 进而在视觉上产生滚动的效果

    }
    </script>
    </head>
    <body>
    <div class="roll" id="roll">
    <a href="javascript:void(0);" class="btn_left"></a>
    <a href="javascript:void(0);" class="btn_right"></a>

    <div class="wrap">
    <ul>
    <li><img src="" width="100" height="100" /></li>
    <li><img src="" width="100" height="100" /></li>
    <li><img src="" width="100" height="100" /></li>
    <li><img src="" width="100" height="100" /></li>
    </ul>
    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    php 3des加密 兼容JAVA 多么痛的领悟呀
    主机序和网络序
    不用递归实现无限分类数据的树形格式化
    python学习笔记之open函数的用法
    据说是百度面试题(1)
    YII+DWZ三级城市联动挂件
    wpf 报错: 在 AddNew 或 EditItem 事务过程中不允许“DeferRefresh”。
    MVVM了解
    纪念2015年上半年
    c# 委托与事件
  • 原文地址:https://www.cnblogs.com/qibingshen/p/5277341.html
Copyright © 2020-2023  润新知