JavaScript怎么实现无间隙文字向上滚动效果
<style type=”text/css”>
#rollText{font:12px;}
</style>
<div id=”rollAD” style=”height:40px; position:relative; overflow:hidden;”>
<div id=”rollText” style=”font-size:12px;line-height:20px;”>
<ul>
<li><a href=””>◇ 无间隙文字向上滚动</a></li>
<li><a href=””>◇ 无间隙文字向上滚动</a></li>
<li><a href=””>◇ 无间隙文字向上滚动</a></li>
<li><a href=””>◇ 无间隙文字向上滚动</a></li>
<li><a href=””>◇ 无间隙文字向上滚动</a></li>
<li><a href=””>◇ 无间隙文字向上滚动</a></li>
<li><a href=””>◇ 无间隙文字向上滚动</a></li>
</ul>
</div>
</div>
<script type=”text/javascript”>
var textDiv = document.getElementById(“rollText”);
var textList = textDiv.getElementsByTagName(“a”);
if(textList.length > 2){
var textDat = textDiv.innerHTML;
var br = textDat.toLowerCase().indexOf(“<li”,textDat.toLowerCase().indexOf(“<li”)+3);
textDiv.innerHTML = textDat+textDat+textDat.substr(0,br);
textDiv.style.cssText = “position:absolute; top:0”;
var textDatH = textDiv.offsetHeight;MaxRoll();
}
var minTime,maxTime,divTop,newTop=0;
function MinRoll(){
newTop++;
if(newTop<=divTop+40){
textDiv.style.top= “-” + newTop+ “px”;
}else{
clearInterval(minTime);
maxTime = setTimeout(MaxRoll,5000);
}
}
function MaxRoll(){
divTop= Math.abs(parseInt(textDiv.style.top));
if(divTop>=0 && divTop<textDatH-40){
minTime = setInterval(MinRoll,1);
}else{
textDiv.style.top= 0;divTop= 0;newTop=0;MaxRoll();
}
}
</script>
本文标题:JavaScript怎么实现无间隙文字向上滚动效果
本文链接:https://www.qqooo.cn/post/6884.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!