兼容IE6,IE7,IE8,friefox的图片上下左右滚动效果
时间:2010-09-28 来源:设计源
<!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> <title>兼容IE6,IE7,IE8,friefox的上下左右图片滚动效果</title> <script type="text/javascript"> // JavaScript Document function Marquee(direction, speed, id, id1, id2) { var demo = document.getElementById(id); var demo1 = document.getElementById(id1); var demo2 = document.getElementById(id2); switch (direction) { case 1: MarqueeToTop(speed, demo, demo1, demo2); break; case 2: MarqueeToDown(speed, demo, demo1, demo2); break; case 3: MarqueeToLeft(speed, demo, demo1, demo2); break; case 4: MarqueeToRight(speed, demo, demo1, demo2); break; } function MarqueeToTop(speed, demo, demo1, demo2) { var MyMarTop = setInterval(MarqueeTop, speed); demo2.innerHTML = demo1.innerHTML; demo.onmouseover = function() { clearInterval(MyMarTop); } demo.onmouseout = function() { MyMarTop = setInterval(MarqueeTop, speed); } function MarqueeTop() { if (demo2.offsetHeight - demo.scrollTop <= 0) { demo.scrollTop -= demo1.offsetHeight; } else { demo.scrollTop++; } } } function MarqueeToDown(speed, demo, demo1, demo2) { var MyMarDown = setInterval(MarqueeDown, speed); demo2.innerHTML = demo1.innerHTML; demo.scrollTop = demo.scrollHeight; demo.onmouseover = function() { clearInterval(MyMarDown); } demo.onmouseout = function() { MyMarDown = setInterval(MarqueeDown, speed); } function MarqueeDown() { if (demo1.offsetTop - demo.scrollTop >= 0) { demo.scrollTop += demo2.offsetHeight; } else { demo.scrollTop--; } } } function MarqueeToLeft(speed, demo, demo1, demo2) { var MyMarLeft = setInterval(MarqueeLeft, speed); demo2.innerHTML = demo1.innerHTML; demo.onmouseover = function() { clearInterval(MyMarLeft); } demo.onmouseout = function() { MyMarLeft = setInterval(MarqueeLeft, speed); } function MarqueeLeft() { if (demo2.offsetWidth - demo.scrollLeft <= 0) { demo.scrollLeft -= demo1.offsetWidth; } else { demo.scrollLeft++; } } } function MarqueeToRight(speed, demo, demo1, demo2) { var MyMarRight = setInterval(MarqueeRight, speed); demo2.innerHTML = demo1.innerHTML; demo.onmouseover = function() { clearInterval(MyMarRight); } demo.onmouseout = function() { MyMarRight = setInterval(MarqueeRight, speed); } function MarqueeRight() { if (demo.scrollLeft <= 0) { demo.scrollLeft += demo2.offsetWidth; } else { demo.scrollLeft--; } } } } </script> </head> <body> <div id="demol1" style="overflow:hidden;width:470px;"> <table> <tr> <td id="demol11"><table style="width:1100px;"> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> </table></td> <td id="demol12"></td> </tr> </table> </div> <div id="demor1" style="overflow:hidden;width:470px;"> <table> <tr> <td id="demor11"><table style="width:1100px;"> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> </table></td> <td id="demor12"></td> </tr> </table> </div> <div id="demod1" style=" overflow:hidden; width:117px; "> <table> <tr> <td id="demod11"><table width="100" align="center" style=""> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> </table></td> </tr> <tr> <td id="demod12"></td> </tr> </table> </div> <div id="demot1" style=" overflow:hidden; width:117px; "> <table> <tr> <td id="demot11"><table width="100" align="center" style=""> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> <tr> <td><img src="http://www.websjy.com/html/images/logo.gif" width="134" height="66" /></td> </tr> </table></td> </tr> <tr> <td id="demot12"></td> </tr> </table> </div> <script type="text/javascript"> Marquee(1,50,"demot1","demot11","demot12"); Marquee(2,50,"demod1","demod11","demod12"); Marquee(3,50,"demol1","demol11","demol12"); Marquee(4,50,"demor1","demor11","demor12"); </script> </body> </html>
相关阅读 更多 +