做了一个图片滚动，IE，遨游，谷歌浏览器均正常，但是火狐中不正常，求助! 必结贴！

本帖最后由 encienqi 于 2011-02-19 16:07:10 编辑

解决方案 »

  1.   


    <!--只要图片移动，然后鼠标移进去停留，鼠标移出来继续滚动是不？-->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>图片向右滚动，鼠标经过停留，鼠标移出继续滚动</title>
        <style type="text/css">
            #demo{width:900px;height:250px;overflow:hidden;}
            #demo img{float:left;margin-right:5px;}
            #indemo{width:400%}
            #demo1{float:left;}
            #demo2{float:left}
        </style>
    </head>
    <body>
    <div id="demo">
        <div id="indemo">
            <div id="demo1">
                <img src="images/p001.jpg" />
                <img src="images/p002.jpg" />
                <img src="images/p003.jpg" />
                <img src="images/p004.jpg" />
                <img src="images/p005.jpg" />
                <img src="images/p006.jpg" />
                <img src="images/p007.jpg" />
                <img src="images/p008.jpg" />
                <img src="images/p009.jpg" />
            </div>
            <div id="demo2"></div>
        </div>
    </div>
    <script type="text/javascript">
        var tab = document.getElementById("demo");
        var tab1 = document.getElementById("demo1");
        var tab2 = document.getElementById("demo2");
        tab2.innerHTML = tab1.innerHTML;
        function scroll(){
            if(tab2.offsetLeft-tab.scrollLeft<=0)
                tab.scrollLeft-=tab2.offsetLeft;
            else 
                tab.scrollLeft++;
        }
        var Mar = setInterval(scroll,10);
        tab.onmouseover=function(){clearInterval(Mar)}
        tab.onmouseout=function(){Mar=setInterval(scroll,10)}
    </script>
    </body>
    </html>
      

  2.   

    ff ie都测试成功！其他浏览器家里没安装！
      

  3.   

    <div id=demo style="OVERFLOW: hidden; WIDTH: 877px; align: center">
      <table cellspacing="0" cellpadding="0" align="center" 
    border="0">
        <tbody>
          <tr>
            <td id="marquePic1" valign="top">
               //图片
    </td>
            <td id="marquePic2" valign="top"></td>
          </tr>
        </tbody>
      </table>
    </div>
      <script type=text/javascript>
          var speed = 30
          marquePic2.innerHTML = marquePic1.innerHTML
          function Marquee() {
              if (demo.scrollLeft >= marquePic1.scrollWidth) {
                  demo.scrollLeft = 0
              } else {
                  demo.scrollLeft++
              } 
          }
          var MyMar = setInterval(Marquee, speed)
          demo.onmouseover = function() { clearInterval(MyMar) }
          demo.onmouseout = function() { MyMar = setInterval(Marquee, speed) } 
      </script>
     
    </div>
      

  4.   

    我试了，不行呀，是一个TD中放一张图还是如我这样？但是不滚动呀
    [code=HTM]
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>图片滚动，鼠标经过停留，鼠标移出继续滚动</title>
    </head>
    <body>
    <div id=demo style="OVERFLOW: hidden; WIDTH: 877px; align: center">
      <table cellspacing="0" cellpadding="0" align="center"  
    border="0">
      <tbody>
      <tr>
      <td id="marquePic1" valign="top">
      <img src="images/p001.jpg" />
                <img src="images/p002.jpg" />
                <img src="images/p003.jpg" />
                <img src="images/p004.jpg" />
                <img src="images/p005.jpg" />
                <img src="images/p006.jpg" />
                <img src="images/p007.jpg" />
                <img src="images/p008.jpg" />
                <img src="images/p009.jpg" />
    </td>
      <td id="marquePic2" valign="top">
      <img src="images/p001.jpg" />
    <img src="images/p002.jpg" />
                <img src="images/p003.jpg" />
                <img src="images/p004.jpg" />
                <img src="images/p005.jpg" />
                <img src="images/p006.jpg" />
                <img src="images/p007.jpg" />
                <img src="images/p008.jpg" />
                <img src="images/p009.jpg" />
    </td>  </tr>
      </tbody>
      </table>
    </div>
      <script type=text/javascript>
      var speed = 30
      marquePic2.innerHTML = marquePic1.innerHTML
      function Marquee() {
      if (demo.scrollLeft >= marquePic1.scrollWidth) {
      demo.scrollLeft = 0
      } else {
      demo.scrollLeft++
      }  
      }
      var MyMar = setInterval(Marquee, speed)
      demo.onmouseover = function() { clearInterval(MyMar) }
      demo.onmouseout = function() { MyMar = setInterval(Marquee, speed) }  
      </script>
     
    </body>
    </html>[/code]
      

  5.   


    //ff不支持contains方法好象
    <div id="A">
        <p id="B">contains</p>
    </div>
        <script type="text/javascript">
            var a = document.getElementById("A");
            var b = document.getElementById("B");
            alert(a.contains(b));
        </script>
    //这段代码你放到ie和ff下看效果，ie会弹出true,ff没反映
    //加个这个方法 ie和 ff下都有效果，你试下看看！
            if(!!window.find){ 
                HTMLElement.prototype.contains = function(B){ 
                return this.compareDocumentPosition(B) - 19 > 0 
                } 
            } 
      

  6.   

    你的这个方法，在谷歌下好像无效~IE、遨游、FF均正常。