码迷,mamicode.com
首页 > 其他好文 > 详细

单行文字向上无间断的滚动

时间:2015-04-20 12:55:01      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:

单行文字向上滚动,这里我主要是用了无逢滚动的原理:通过改变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;}

样式写的不太好看

  

 

单行文字向上无间断的滚动

标签:

原文地址:http://www.cnblogs.com/wujidns/p/4440930.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!