?
?
JS新闻无缝滚动封装函数:
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>新闻滚动</title> </head> <body> <div class="zxfb"> <strong>新闻滚动</strong> <ul> <li class="xj_list_bg"> <div class="xj_cl">最新发布材料</div> </li> </ul> <ul id="rolltxt" style="overflow:hidden;height:126px;"> <li> <div class="xj_cl" title="镜面不锈钢"> 镜面不锈钢 </div> </li> <li> <div class="xj_cl" title="测试文字询价"> 测试文字询价 </div> </li> <li> <div class="xj_cl" title="混流式通风机"> 混流式通风机 </div> </li> <li> <div class="xj_cl" title="混流式通风机"> 混流式通风机 </div> </li> <li> <div class="xj_cl" title="混流式通风机"> 混流式通风机 </div> </li> <li> <div class="xj_cl" title="低噪声风机箱"> 低噪声风机箱 </div> </li> <li> <div class="xj_cl" title="低噪声风机箱"> 低噪声风机箱 </div> </li> <li> <div class="xj_cl" title="低噪声风机箱"> 低噪声风机箱 </div> </li> <li> <div class="xj_cl" title="吊装式排气扇"> 吊装式排气扇 </div> </li> <li> <div class="xj_cl" title="吊装式排气扇"> 吊装式排气扇 </div> </li> </ul> </div> </div> <script type="text/javascript" defer="defer"> /* 函数功能:实现文字无缝滚动效果 函数startmarquee的参数: lh:文字一次向上滚动的距离或高度; speed:滚动间隔时间 delay:滚动停顿的时间间隔; */ function startmarquee(lh,speed,delay){ var interval_run; var pause = false; var scroll_area = document.getElementById("rolltxt"); scroll_area.innerHTML += scroll_area.innerHTML; //复制的目的在于给文字不间断向上滚动提供过渡。 scroll_area.onmouseover = function(){ pause = true }; //鼠标滑过,停止滚动; scroll_area.onmouseout = function(){ pause = false }; //鼠标离开,开始滚动; scroll_area.scrollTop = 0; //文字顶端与滚动区域顶端的距离,初始值为0; function start(){ interval_run = setInterval(scrolling,speed); if(!pause){ scroll_area.scrollTop += 1;}//滚动停止或开始,取决于p传来的布尔值; } function scrolling(){ if(scroll_area.scrollTop % lh != 0){//如果不被整除,即一次上移的高度达不到lh,则内容会继续往上滚动; scroll_area.scrollTop += 1; if(scroll_area.scrollTop >= scroll_area.scrollHeight/2) scroll_area.scrollTop = 0;//对象scroll_area中的内容之前被复制了一次,所以它的滚动高度,其实是原来内容的两倍高度;当内容向上滚动到scrollHeight/2的高度时,全部3行文 字已经显示了一遍,至此整块内容sc