<!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;height:80px;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;height:80px;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; height:300px; ">
<table>
<tr>
<td id="demod11"><table width="100" align="center" style="height:500px;">
<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; height:384px; ">
<table>
<tr>
<td id="demot11"><table width="100" align="center" style="height:500px;">
<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>