?
?
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行文
字已经显示了一遍，至此整块内容scrollTop归0；再等待下一轮的滚动，从而达到文字不间断向上滚动的效果；
}else{
clearInterval(interval_run);//否则清除t，暂停滚动
setTimeout(start,delay);//经过delay间隔后，启动start() 再连续滚动
}
}
setTimeout(start,delay);//第一次启动滚动；setTimeout会在一定的时间后执行函数start()，且只执行一次
}
startmarquee(18,30,1000);
//startmarquee(26,30,3000);
</script>
</body>
</html>
?