连续滚动代码的方法技巧
一:上下连续滚动
<div id=rolllink style=overflow:hidden;height:170;width:100>
<div id=rolllink1>要滚动的内容</div>
<div id=rolllink2></div>
</div>
<script>
var rollspeed=30
rolllink2.innerHTML=rolllink1.innerHTML //克隆rolllink1为rolllink2
function Marquee()
{
if(rolllink2.offsetTop-rolllink.scrollTop<=0) //当滚动至rolllink1与rolllink2交界时
rolllink.scrollTop-=rolllink1.offsetHeight//rolllink跳到最顶端
else
rolllink.scrollTop++
}
var MyMar=setInterval(Marquee,rollspeed) //设置定时器
rolllink.onmouseover=function()
{clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
rolllink.onmouseout=function()
{MyMar=setInterval(Marquee,rollspeed)}//鼠标移开时重设定时器
</script>
二:左右连续滚动
<div id=demo3 style=overflow:hidden;height:100;width:710;>
<table width="710" border=0 align="center" cellpadding=0 cellspacing="3" cellspace=0>
<tr>
<td nowrap id=demo4>要滚动的内容</td>
<td nowrap id=demo5></td>
</tr>
</table>
</div>
<script>
var speed=10
demo5.innerHTML=demo4.innerHTML
function Marquee()
{
if(demo5.offsetWidth-demo3.scrollLeft<=0)
demo3.scrollLeft-=demo4.offsetWidth
else
{
demo3.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo3.onmouseover=function()
{clearInterval(MyMar)}
demo3.onmouseout=function()
{MyMar=setInterval(Marquee,speed)}
</script>
三.时滚时停的代码
<div id="icefable1">要滚动的内容</div>
<script language="JavaScript" type="text/javascript">
marqueesHeight=100;
stopscroll=false;
with(icefable1)
{
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
preTop=0; currentTop=marqueesHeight; stoptime=0;
icefable1.innerHTML += icefable1.innerHTML;
function init_srolltext() {
icefable1.scrollTop=0;
setInterval("scrollUp()",15);
}
function scrollUp() {
if(stopscroll==true) return;
currentTop+=1;
if(currentTop>marqueesHeight)
{
stoptime+=1;
currentTop-=1;
if(stoptime==400)
{
currentTop=0;
stoptime=0;
}
}
else {
preTop=icefable1.scrollTop;
icefable1.scrollTop+=1;
if(preTop==icefable1.scrollTop)
{
icefable1.scrollTop=0;
icefable1.scrollTop+=1;
}
}
}
init_srolltext();
</script>
本文地址:http://www.45fan.com/dnjc/72930.html