?
?
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