您的位置：首页 > Web前端 > JavaScript

兼容FF，JS不间断循环滚动，包含自滚动，左右自滚动，点击左右滚动，鼠标暂停效果

2008-09-12 00:57 621 查看

<BODY leftMargin=0 topMargin=2 marginheight="0" marginwidth="0">

<CENTER>

<p>

<h1>JS不间断循环滚动</h1><p>

<TABLE

style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid"

cellSpacing=0 cellPadding=0 width=750 align=center border=0>

<TBODY>

<TR><td width="30"><a href="#" onClick="clickdiv()" id="aa">向左</a></td>

<TD>

<DIV id=demo style="OVERFLOW: hidden; WIDTH: 750px; COLOR: #ffffff">

<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">

<TBODY>

<TR>

<TD id=demo1 vAlign=top><table width="1710" height="116" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="171" background="pic_bg.jpg"><div align="center">内容一</div></td>

<td width="171" background="pic_bg.jpg"><div align="center">内容二</div></td>

<td width="171" background="pic_bg.jpg"><div align="center">内容三</div></td>

<td width="171" background="pic_bg.jpg"><div align="center">内容四</div></td>

<td width="171" background="pic_bg.jpg"><div align="center">内容五</div></td>

<td width="171" background="pic_bg.jpg"><div align="center">内容六</div></td>

<td width="171" background="pic_bg.jpg"><div align="center">内容七</div></td>

<td width="171" background="pic_bg.jpg"><div align="center">内容八</div></td>

<td width="171" background="pic_bg.jpg"><div align="center">内容九</div></td>

<td width="171" background="pic_bg.jpg"><div align="center">内容十</div></td>

</tr>

</table></TD>

<TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>

</TD><td width="30"><a href="#" onClick="Rclickdiv()" id="mcc">向右</a></td></TR></TBODY></TABLE></TD></TR></TABLE>

</CENTER><SCRIPT>

var speed3=25//速度数值越大速度越慢

var t=false;

var id="aa";

document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML

function Marquee(){

if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)

document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth

else{

document.getElementById("demo").scrollLeft++

}

t=false;

}

function RMarquee(){

if(document.getElementById("demo").scrollLeft<=0)

document.getElementById("demo").scrollLeft+=document.getElementById("demo2").offsetWidth

else{

document.getElementById("demo").scrollLeft--

}

t=true;

}

function clickdiv(){

clearInterval(MyMar)

Marquee();

}

function Rclickdiv(){

clearInterval(MyMar)

RMarquee();

}

var MyMar=setInterval(Marquee,speed3)

document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)}

document.getElementById("demo").onmouseout=function() {if(t){MyMar=setInterval(RMarquee,speed3)}else{MyMar=setInterval(Marquee,speed3)}}

document.getElementById('mcc').onmouseout=function(){clearInterval(MyMar);MyMar=setInterval(RMarquee,speed3);}

document.getElementById('aa').onmouseout=function(){clearInterval(MyMar);MyMar=setInterval(Marquee,speed3);}

</SCRIPT>

</BODY>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航