单行文字向上滚动,这里我主要是用了无逢滚动的原理:通过改变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;}
样式写的不太好看
时间: 2024-10-31 12:43:39