| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 564 人关注过本帖
标题:javascript 实现无缝滚动
只看楼主 加入收藏
shashadezhu8
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2010-9-2
结帖率:0
收藏
已结贴  问题点数:20 回复次数:2 
javascript 实现无缝滚动
<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的值最大能达到多少,是怎么算出来的。有谁清楚的,帮帮俺吧
搜索更多相关主题的帖子: javascript 无缝 滚动 
2010-09-02 15:47
gupiao175
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:40
帖 子:1787
专家分:7527
注 册:2007-6-27
收藏
得分:20 
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++;
      }

Q:1428196631,百度:开发地 即可找到我,有事请留言!
2010-09-02 19:04
ieleilei
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2011-4-5
收藏
得分:0 
写的真好!
2011-04-30 02:15
快速回复:javascript 实现无缝滚动
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.018625 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved