为什么js无缝滚动会自动停止

我在网上找了个上下无缝滚动代码，放在A页面运行正常（A页面什么也没有，就一个无缝滚动代码），然后放在B页面中运行，滚动一会就不滚动了（B页面有比较多内容），郁闷，找不出原因,请大侠们看看，上下无缝滚动代码如下:
<div id=demo style="overflow:hidden;height:550px; margin-top:2px"> 
<div id=demo1> 
<img src="images/1.gif" title="1" style=" margin-top:5px"><br>
<img src="images/2.gif" title="2" style=" margin-top:5px"><br>
<img src="images/3.gif" title="3" style=" margin-top:5px"><br>
<img src="images/4.gif" title="4" style=" margin-top:5px"><br>
<img src="images/5.gif" title="5" style=" margin-top:5px"><br>
</div> 
<div id=demo2></div> 
</div> 
<script language="javascript">
    var speed = 5
    var demo = document.getElementById("demo");
    var demo2 = document.getElementById("demo2");
    var demo1 = document.getElementById("demo1");
    demo2.innerHTML = demo1.innerHTML
    function Marquee() {
        if (demo2.offsetTop - demo.scrollTop <= 0)
            demo.scrollTop -= demo1.offsetHeight
        else {
            demo.scrollTop++
        }
    }
    var MyMar = setInterval(Marquee, speed)
    demo.onmouseover = function () { clearInterval(MyMar) }
    demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) } 
</script>A页面:<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
</head>
<body>
<form id="form1" runat="server"><div id=demo style="overflow:hidden;height:550px; margin-top:2px"> 
<div id=demo1> 
<img src="images/1.gif" title="1" style=" margin-top:5px"><br>
<img src="images/2.gif" title="2" style=" margin-top:5px"><br>
<img src="images/3.gif" title="3" style=" margin-top:5px"><br>
<img src="images/4.gif" title="4" style=" margin-top:5px"><br>
<img src="images/5.gif" title="5" style=" margin-top:5px"><br>
</div> 
<div id=demo2></div> 
</div> 
<script language="javascript">
    var speed = 5
    var demo = document.getElementById("demo");
    var demo2 = document.getElementById("demo2");
    var demo1 = document.getElementById("demo1");
    demo2.innerHTML = demo1.innerHTML
    function Marquee() {
        if (demo2.offsetTop - demo.scrollTop <= 0)
            demo.scrollTop -= demo1.offsetHeight
        else {
            demo.scrollTop++
        }
    }
    var MyMar = setInterval(Marquee, speed)
    demo.onmouseover = function () { clearInterval(MyMar) }
    demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) } 
</script>
</form>
</body>
</html>B页面<%@ Page Language="C#" AutoEventWireup="true" CodeFile="main.aspx.cs" Inherits="main" %><!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 runat="server">
    <title>主页</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head><body style="padding:0px; margin:0px">
    <form id="form1" runat="server">
    <div style=" position:relative">
   <div style=" float:left;width:480px">
<div id="welcome" class="post">
<h2 class="title"><span style=" font-family:微软雅黑; font-size:14px">公司</span></h2>
<h3 class="date"><span style=" font-size:12px">[<a href="aboutUs/Introduction.aspx" style=" color:White">更多</a>]</span></h3>
<div class="story"><img src="images/公司.gif" alt="" width="120" height="120" class="left" />
<%=getCt() %>
</div>
<div class="meta">
<p><img src="images/e.jpg"/></p>
</div>
</div>
<!-- end #welcome -->
<div id="example" class="post">
<h2 class="title" style=" font-family:微软雅黑; font-size:14px"><span>产品</span></h2>

<div class="story">
<p><object classid= "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 "   codebase= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0 "   width= "440"   height= "298"> 
                            <param   name= "movie "   value= "flash/18799.swf"> 
                            <param   name= "quality "   value= "high "> 
                            <embed   src= "flash/18799.swf"   quality= "high "   pluginspage= "http://www.macromedia.com/go/getflashplayer "   type= "application/x-shockwave-flash "   width= "440"   height= "298"> </embed> 
                        </object></p>
</div>
<div class="meta">
友情链接： <a href="#" target="_blank">aa</a>
<a href="#" target="_blank">bb</a> <a href="#" target="_blank">cc</a> 
</div>
</div>
<!-- end #example -->
</div>
<!-- end #main -->
<div id="sidebar2">
<div id="sponsors" class="boxed">
<div class="title">
<h2>gg</h2>
</div>
<div>
<object classid= "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 "   codebase= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0 "   width= "180"   height= "120"> 
                            <param  name= "movie "   value= "flash/lh.swf"> 
                            <param  name= "quality "   value= "high "> 
                            <embed  src= "flash/lh.swf"   quality= "high "   pluginspage= "http://www.macromedia.com/go/getflashplayer "   type= "application/x-shockwave-flash "   width= "180"   height= "120"> </embed> 
                        </object>
</div>
</div>
<!-- end #sponsors -->
<div id="ad120x600" class="boxed">
        <div class="title"><h2 style=" text-align:left">bbb</h2></div>
        
       <div id=demo style="overflow:hidden;height:550px; margin-top:2px"> 
<div id=demo1> 
<img src="images/1.gif" title="1" style=" margin-top:5px"><br>
<img src="images/2.gif" title="2" style=" margin-top:5px"><br>
<img src="images/3.gif" title="3" style=" margin-top:5px"><br>
<img src="images/4.gif" title="4" style=" margin-top:5px"><br>
<img src="images/5.gif" title="5" style=" margin-top:5px"><br>
</div> 
<div id=demo2></div> 
</div> 
<script language="javascript">
    var speed = 5
    var demo = document.getElementById("demo");
    var demo2 = document.getElementById("demo2");
    var demo1 = document.getElementById("demo1");
    demo2.innerHTML = demo1.innerHTML
    function Marquee() {
        if (demo2.offsetTop - demo.scrollTop <= 0)
            demo.scrollTop -= demo1.offsetHeight
        else {
            demo.scrollTop++
        }
    }
    var MyMar = setInterval(Marquee, speed)
    demo.onmouseover = function () { clearInterval(MyMar) }
    demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) } 
</script>
        </div>
    </div>
    </div>
    </form>
</body>
</html>

解决方案 »

  1.   

    代码估计没问题
    可能根你页面上的样式起冲突了，这段代码运行，跟html的显示结构有很大的关联。
      

  2.   


    if (demo2.offsetTop - demo.scrollTop <= 0){
      demo.scrollTop -= demo1.offsetHeight
      alert(demo2.offsetTop - demo.scrollTop);
      }
      else {
      demo.scrollTop++
      }红色部分跟一下就知道什么原因
      

  3.   

    A,B都没有问题。
    估计是你的鼠标没有称出demo元素的边界
    加上border看一下。
      

  4.   

    您把demo及demo1的高设置为一样的，<script language="javascript">这个最好是这么写<script language="javascript" type="text/javascript">
    这样应该就可以了