注册 登录
编程论坛 JavaScript论坛

javascript 实现无缝滚动

shashadezhu8 发布于 2010-09-02 15:47, 564 次点击
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'updown.jsp' starting pagehttp://192.168.1.123:8080/test/updown.jsp</title>
   
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->

  </head>
  
  <body>
    <div id="demo" style="overflow: hidden;width:262px;height:140px;border:2px solid #3c3c3c;">
     <div id="demo1" style="">
      <a href="d">是大夫撒旦发射点发斯蒂芬</a><br><a href="d">是大夫撒旦发射点发斯蒂芬</a><br>
      <a href="d">是大夫撒旦发射点发斯蒂芬</a><br><a href="d">是大夫撒旦发射点发斯蒂芬</a><br>
      <a href="d">是大夫撒旦发射点发斯蒂芬</a><br><a href="d">是大夫撒旦发射点发斯蒂芬</a><br>
      <a href="d">是大夫撒旦发射点发斯蒂芬</a><br><a href="d">是大夫撒旦发射点发斯蒂芬</a><br>
      
     </div>
     <div id="demo2"></div>
    </div>
    <!-- demo 的scrollTop值和demo的高度,demo1元素的高度 以后用到只好慢慢调试了 当demo1的高度为0时,scrollTop就一直是0不变,demo=0时,scrollTop也会保持0不变
     要想保证正常滚动,最好设置demo的高度和和demo1的高度相近,当demo1有足够高的高度时,可以设置demo的高度不高于demo1的高度 具体的到底什么规律,搞不明白。先用吧
    -->
    <script type="text/javascript">
     
     var speed=50;
      demo2.innerHTML =demo1.innerHTML;
       alert(demo.scrollHeight);
      alert(demo2.offsetTop);
      //alert('dd');
     function marquee(){
      
      //alert(demo.scrollTop);
      if(demo2.offsetTop-demo.scrollTop<=0){
       //demo.scrollTop++;
       demo.scrollTop -= demo2.offsetTop;
      }else{
       demo.scrollTop++;
      }
      //alert(demo.scrollTop);
     }
     var MyMar=setInterval(marquee,speed);
     demo.onmouseover=function (){clearInterval(MyMar)}
     demo.onmouseout=function (){MyMar=setInterval(marquee,speed)}
    </script>
  </body>
</html>

  这段代码实现了向上滚动的效果,我做了好多测试,就是想知道scrollTop的值最大能达到多少,是怎么算出来的。有谁清楚的,帮帮俺吧
2 回复
#2
gupiao1752010-09-02 19:04
demo.scrollTop的最大值IE为144,火狐为148,因为2个浏览器scrollTop,offsetTop值都不相同,IE为144,144,火狐为154,154,为了达到2者效果兼容一样:
 if(demo2.offsetTop-demo.scrollTop<=0){
       //demo.scrollTop++;
       demo.scrollTop -= demo2.offsetTop;
      }else{
       demo.scrollTop++;
      }
      //alert(demo.scrollTop);
     }
必须改为:
   if(demo2.offsetTop-demo.scrollTop<=6){
//IE的demo.scrollTop到了138就执行了,而FF为148才执行!所以上面那个要改为(154-148)=6,如果是0,那火狐执行一段时间就停止了!
        demo.scrollTop -= demo2.offsetTop;
      }else{
       demo.scrollTop++;
      }
#3
ieleilei2011-04-30 02:15
写的真好!
1