[javascript]网页文字无空白自动滚动的一种实现方式

页面文字自动滚动,也就是一个div框中,文字一条一条的向上滚动,文字可能占了多行,这就要求每次滚动的幅度要自动判断并滚动适当的高度。一下是一种js的实现方式,希望大家能多多交流

 

页面假如通过list循环已经向div中插入了多条数据

<BODY> <div id="marqueebox" style="overflow:hidden;width:200px;height:200px;border:solid 1px #AA9299;margin-top:5px;font-size:12px;line-height:150%;color:#938C43;text-align:center;"> <div id="d1"><a href="#" mce_href="#" target=_blank>1循环滚动字母行</a><br/>aaaaaa</div> <div id="d2"><a href="#" mce_href="#" target=_blank>2循环滚动字母行</a></div> <div id="d3"><a href="#" mce_href="#" target=_blank>3循环滚动字母行</a><br/>aaaaaa</div> <div id="d4"><a href="#" mce_href="#" target=_blank>4循环滚动字母行</a></div> <div id="d5"><a href="#" mce_href="#" target=_blank>5循环滚动字母行</a><br/>aaaaaa</div> <div id="d6"><a href="#" mce_href="#" target=_blank>6循环滚动字母行</a></div> <div id="d7"><a href="#" mce_href="#" target=_blank>7循环滚动字母行</a></div> <div id="d8"><a href="#" mce_href="#" target=_blank>8循环滚动字母行</a></div> <div id="d9"><a href="#" mce_href="#" target=_blank>9循环滚动字母行</a><br/>aaaaaa</div> <div id="d10"><a href="#" mce_href="#" target=_blank>10循环滚动字母行</a><br/>aaaaaa</div> </div> </BODY

 

以下是实现的js代码

var _marqueebox = document.getElementById("marqueebox"); var _marqueeboxElements = _marqueebox.getElementsByTagName("div"); //获取子div的总数 var _totalNum = _marqueeboxElements.length; function initrolltext(){ window.setInterval(rolltext,2000); } var rollintervalindex;//动画函数定时器ID var heightoffirstdiv;//滚动片首个元素的行高 var _begin = true;//标记是否启动第一次循环 //实现滚动片不断头部去除放到尾部的函数 function rolltext(){ var nextLine= _marqueeboxElements[0];//取首元素 document.getElementById("marqueebox").scrollTop=0;//滚动div的高度偏移量永远定位0,表示在首位 if(!_begin){ document.getElementById("marqueebox").removeChild(nextLine);//删除第一个子节点 document.getElementById("marqueebox").appendChild(nextLine);//增加一个子节点到末尾 } _begin = false;//以后的循环已经不再是第一次的启动循环 heightoffirstdiv = _marqueeboxElements[0].offsetHeight;//当前移动的偏移量 clearInterval(rollintervalindex); rollintervalindex=setInterval("scrollMarquee("+heightoffirstdiv+")",20); //以20毫秒速度执行,速度非常快 } //模拟动画的函数 function scrollMarquee(heightoffirstdiv) { document.getElementById("marqueebox").scrollTop++; //网上滚动一个行距 if(document.getElementById("marqueebox").scrollTop == heightoffirstdiv){ clearInterval(rollintervalindex);//停止滚动任务 } } window.setTimeout(initrolltext,1000);

你可能感兴趣的:([javascript]网页文字无空白自动滚动的一种实现方式)