<!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" > <head> <body> <div id="demo" style="overflow:hidden;height:215px;"> <div id="demo1"> <a title="" href="#" mce_href="#" target="_blank">aaaa</a><br> <a title="" href="#" mce_href="#" target="_blank">bbbb</a><br> <a title="" href="#" mce_href="#" target="_blank">cccc</a><br> <a title="" href="#" mce_href="#" target="_blank">ddd</a><br> </div> <div id="demo2"></div> </div> <mce:script type="text/javascript"><!-- var speed=50 var demo= document.getElementById("demo"); var demo1 = document.getElementById("demo1"); var demo2 = document.getElementById("demo2"); demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo.scrollTop>=demo2.offsetHeight) { demo.scrollTop-=demo1.offsetHeight } else{ demo.scrollTop++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} // --></mce:script> </body> </html>
//横向
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>tangfang</title> </head> <body> <div id="demo" style="overflow:hidden;height:120px;600px;color:#ffffff"> <table align=left cellpadding=0 border=0><tr><td id="demo1" valign=top> <table border=0 cellpadding=0 cellspacing=0> <tr> <td><img src="http://tangfang9.cn/images/logo.gif" mce_src="http://tangfang9.cn/images/logo.gif" width=150 height=100></td> <td><img src="http://tangfang9.cn/images/logo.gif" mce_src="http://tangfang9.cn/images/logo.gif" width=150 height=100></td> <td><img src="http://tangfang9.cn/images/logo.gif" mce_src="http://tangfang9.cn/images/logo.gif" width=150 height=100></td> <td><img src="http://tangfang9.cn/images/logo.gif" mce_src="http://tangfang9.cn/images/logo.gif" width=150 height=100></td> <td><img src="http://tangfang9.cn/images/logo.gif" mce_src="http://tangfang9.cn/images/logo.gif" width=150 height=100></td> </tr> </table> </td><td id="demo2" valign=top></td></tr></table></div> <mce:script language="javascript"><!-- var LeftMyMar; var MyMar; var speed=30; function MarqueeLeft() { clearInterval(MyMar) demo2.innerHTML=demo1.innerHTML //向左走 function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } LeftMyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(LeftMyMar)} demo.onmouseout=function() {LeftMyMar=setInterval(Marquee,speed)} } MarqueeLeft(); function MarqueeRight() { clearInterval(LeftMyMar) demo2.innerHTML=demo1.innerHTML demo.scrollLeft=demo.scrollWidth function Marquee(){ if(demo.scrollLeft<=0) demo.scrollLeft+=demo2.offsetWidth else{ demo.scrollLeft-- } } MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} } // --></mce:script> <a href="#" mce_href="#" onClick="MarqueeLeft()">向左</a> <a href="#" mce_href="#" onClick="MarqueeRight()">向右</a> </body> </html>