兼容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>
运行效果