zoukankan      html  css  js  c++  java
  • 原生javascript效果:无缝滚动

    <style type="text/css">
    #con {400px; padding:10px; margin:20px auto; text-align:center; border:1px solid #ccc;}
    #con .roll {400px; height:100px; position:relative; overflow:hidden; margin-bottom:10px;}
    #con ul {position:absolute;}
    #con ul li {float:left; 120px; height:100px; padding-left:10px;}
    #con ul li a {display:block; 120px; height:100px; background:#333; color:#fff;}
    #con span {display:inline-block; *display:inline; *zoom:1; height:30px; line-height:30px; padding:0 10px; background:#ccc;}
    </style>
    

      

    js:

    <script type="text/javascript">
    window.onload=function () {
            var oCon = document.getElementById('con');
            var oUl = oCon.getElementsByTagName('ul')[0];
            var aLi = oUl.getElementsByTagName('li');
            var aSpan = oCon.getElementsByTagName('span');
            var iSpeed = -2;
            var timer;
            
            oUl.innerHTML += oUl.innerHTML;
            oUl.style.width = aLi.length*aLi[0].offsetWidth+'px';
            
            function goRoll() {
                    timer = setInterval(function() {
                            oUl.style.left = oUl.offsetLeft+iSpeed+'px';
                            if(oUl.offsetLeft<-oUl.offsetWidth/2) {
                                    oUl.style.left = '0px';
                            } else if(oUl.offsetLeft>=0) {
                                    oUl.style.left = -oUl.offsetWidth/2+'px';
                            }
                    }, 30);
            }
            
            oUl.onmouseover = function() {clearInterval(timer);};
            oUl.onmouseout = function() {goRoll();};
            
            aSpan[0].onmouseover = function() {iSpeed = -2};
            aSpan[1].onmouseover = function() {iSpeed = 2};
            
            goRoll();
    };
    </script>
    

      

    html:

    <div id="con">
                    <div class="roll">
                            <ul>
                                    <li><a href="javascript:;">mming<br />无缝滚动演示<br />001</a></li>
                                    <li><a href="javascript:;">mming<br />无缝滚动演示<br />002</a></li>
                                    <li><a href="javascript:;">mming<br />无缝滚动演示<br />003</a></li>
                                    <li><a href="javascript:;">mming<br />无缝滚动演示<br />004</a></li>
                            </ul>
                    </div>
                    <span><< 向左</span>
                    <span>向右 >></span>
     </div>
    

      

  • 相关阅读:
    导航栏下拉至一定高度后固定在顶部的特效
    laravel表单中文错误提示本地化
    laravel模板使用
    网站测试用例
    sublime安装ctags用于追踪函数
    ecshop头部添加所在城市
    php 常用的redis操作语法
    mysql where与 having的区别
    mysql 列类型以及属性特点
    不错的博客链接
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/3966962.html
Copyright © 2011-2022 走看看