转载(兼容多浏览器的左右滚动脚本代码)
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)-JS特效学院|JsWeb.Cn</title> </head> <body><!--下面是向上滚动代码--> <div id=jsweb8_cn_top style=overflow:hidden;height:100;width:90;> <div id=jsweb8_cn_top1> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> </div> <div id=jsweb8_cn_top2></div> </div> <script> var speed=30 jsweb8_cn_top2.innerHTML=jsweb8_cn_top1.innerHTML //克隆jsweb8_cn_top1为jsweb8_cn_top2 function Marquee1(){ //当滚动至jsweb8_cn_top1与jsweb8_cn_top2交界时 if(jsweb8_cn_top2.offsetTop-jsweb8_cn_top.scrollTop<=0) jsweb8_cn_top.scrollTop-=jsweb8_cn_top1.offsetHeight //jsweb8_cn_top跳到最顶端 else{ jsweb8_cn_top.scrollTop++; } } var MyMar1=setInterval(Marquee1,speed)//设置定时器 //鼠标移上时清除定时器达到滚动停止的目的 jsweb8_cn_top.onmouseover=function() {clearInterval(MyMar1)} //鼠标移开时重设定时器 jsweb8_cn_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)} </script> <!--向上滚动代码结束--> <br> <!--下面是向下滚动代码--> <div id=jsweb8_cn_bottom style=overflow:hidden;height:100;width:90;> <div id=jsweb8_cn_bottom1> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> </div> <div id=jsweb8_cn_bottom2></div> </div> <script> var speed=30 jsweb8_cn_bottom2.innerHTML=jsweb8_cn_bottom1.innerHTML jsweb8_cn_bottom.scrollTop=jsweb8_cn_bottom.scrollHeight function Marquee2(){ if(jsweb8_cn_bottom1.offsetTop-jsweb8_cn_bottom.scrollTop>=0) jsweb8_cn_bottom.scrollTop+=jsweb8_cn_bottom2.offsetHeight else{ jsweb8_cn_bottom.scrollTop-- } } var MyMar2=setInterval(Marquee2,speed) jsweb8_cn_bottom.onmouseover=function() {clearInterval(MyMar2)} jsweb8_cn_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)} </script> <!--向下滚动代码结束--> <br> <!--下面是向左滚动代码--> <div id="jsweb8_cn_left" style="overflow:hidden;width:500px;"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td id="jsweb8_cn_left1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0"> <tr align="center"> <td><img src="http://jsweb8.cn/images/logo.gif"></td> <td><img src="http://jsweb8.cn/images/logo.gif"></td> <td><img src="http://jsweb8.cn/images/logo.gif"></td> <td><img src="http://jsweb8.cn/images/logo.gif"></td> <td><img src="http://jsweb8.cn/images/logo.gif"></td><td><img src="http://jsweb8.cn/images/logo.gif" width="88"></td> <td><img src="http://jsweb8.cn/images/logo.gif"></td> </tr> </table> </td> <td id="jsweb8_cn_left2" valign="top"></td> </tr> </table> </div> <script> var speed=30//速度数值越大速度越慢 jsweb8_cn_left2.innerHTML=jsweb8_cn_left1.innerHTML function Marquee3(){ if(jsweb8_cn_left2.offsetWidth-jsweb8_cn_left.scrollLeft<=0) jsweb8_cn_left.scrollLeft-=jsweb8_cn_left1.offsetWidth else{ jsweb8_cn_left.scrollLeft++ } } var MyMar3=setInterval(Marquee3,speed) jsweb8_cn_left.onmouseover=function() {clearInterval(MyMar3)} jsweb8_cn_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)} </script> <!--向左滚动代码结束--> <br> <!--下面是向右滚动代码--> <div id="jsweb8_cn_right" style="overflow:hidden;width:500px;"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td id="jsweb8_cn_right1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0"> <tr align="center"> <td><img src="http://jsweb8.cn/images/logo.gif"></td> <td><img src="http://jsweb8.cn/images/logo.gif"></td> <td><img src="http://jsweb8.cn/images/logo.gif"></td> <td><img src="http://jsweb8.cn/images/logo.gif"></td> <td><img src="http://jsweb8.cn/images/logo.gif"></td> </tr> </table> </td> <td id="jsweb8_cn_right2" valign="top"></td> </tr> </table> </div> <script> var speed=30//速度数值越大速度越慢 jsweb8_cn_right2.innerHTML=jsweb8_cn_right1.innerHTML function Marquee4(){ if(jsweb8_cn_right.scrollLeft<=0) jsweb8_cn_right.scrollLeft+=jsweb8_cn_right2.offsetWidth else{ jsweb8_cn_right.scrollLeft-- } } var MyMar4=setInterval(Marquee4,speed) jsweb8_cn_right.onmouseover=function() {clearInterval(MyMar4)} jsweb8_cn_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)} </script> <!--向右滚动代码结束--> <p></p> 更多精彩尽在JS特效学院|<a href="http://www.jsweb8.cn" target="_blank">www.jsweb8.cn</a>,转载请注明出处(JS特效学院) </body> </html>