zoukankan      html  css  js  c++  java
  • 单行文字向上无间断的滚动

    单行文字向上滚动,这里我主要是用了无逢滚动的原理:通过改变top值,让文字让上移动,需要一个定时器

    	var oNav=document.getElementById('nav');
    			var oUl=oNav.getElementsByTagName('ul')[0];
    			var aLi=oUl.children;
    			var timer=null;
    			var speed=-1;
    
    			oUl.innerHTML+=oUl.innerHTML;
    			oUl.style.height=aLi[0].offsetHeight*aLi.length+'px';
    
    			timer=setInterval(function(){
    				var t=oUl.offsetTop;
    				t+=speed;
    
    				if(t<=-oUl.offsetHeight/2){
    					t=0;
    				};
    
    				oUl.style.top=t+'px';
    
    			},30);
    	}
    
        <div class="nav" id="nav">
            <ul>
                <li><a href="#">测试1111111111111111111111111</a></li>
                <li><a href="#">222222222222222222222222222</a></li>
                <li><a href="#">33333333333333333333333333333</a></li>
                <li><a href="#">44444444444444444444</a></li>
                <li><a href="#">555555555555555555555</a></li>
                <li><a href="#">6666666666666666666666</a></li>
                <li><a href="#">777777777777777777777777777</a></li>
            </ul>
    
        </div>
    .nav{width:300px; height:35px;line-height: 35px; border:1px solid #ccc;margin:100px auto; position: relative; overflow: hidden;}
    .nav ul{  position: absolute;left:0;top:0;}
    .nav ul li{height:35px;  list-style: none;}
    .nav ul li a{ text-decoration: none;}

    样式写的不太好看

      

    如果问题,欢迎大家及时指点,一同交流,共同提高
  • 相关阅读:
    ListIterator
    List与set
    iterator取集合元素
    我眼中的AI
    集合的共性方法
    集合转数组
    打开与关闭eclipse的自动补全功能
    Mr_matcher的细节1
    nodelet的应用
    nodelet的理解
  • 原文地址:https://www.cnblogs.com/wujidns/p/4440930.html
Copyright © 2011-2022 走看看