兼容IE和FireFox的间隔滚动代码

2007-09-10 16:05 | Filed Under Html/JS/CSS |

网上按这个标题搜索能搜到一大坨，其实没一个好用的，可见网上文章一大抄。
自己改了改，调用方式参考例子，能适应一个页面内的多个不同的滚动。

调用应该挺简单的，可能稍微麻烦点的就是需要设置一下CSS

提示：你可以先修改部分代码再运行。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>兼容IE和FireFox的间隔滚动代码</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6. <style type="text/css">
  7. <!--
  8. .scrolldiv {
  9.     overflow: hidden;
  10.     width: 600px;
  11.     height: 18px;
  12.     background: #E8F8F8;
  13.     padding: 0 10px;
  14. }
  15. .scrollmessage {
  16.     text-align: left;
  17. }
  18.  
  19. .scrollmessage ul {
  20.     margin: 0px;
  21.     padding: 0px;
  22.     list-style: none;
  23. }
  24.  
  25. .scrollmessage li {
  26.     height: 18px;
  27.     line-height: 18px;
  28. }
  29. -->
  30. </style>
  31. </head>
  32. <body>
  33.  
  34. <div id="scroll1" class="scrolldiv">
  35. <div class="scrollmessage">
  36.   <ul>
  37.     <li><a href="#">11111111111111111!</a></li>
  38.     <li><a href="#">22222222222222222!</a></li>
  39.     <li><a href="#">33333333333333333!</a></li>
  40.     <li><a href="#">44444444444444444!</a></li>
  41.   </ul>
  42. </div>
  43. </div>
  44.  
  45. <div id="scroll2" class="scrolldiv">
  46. <div class="scrollmessage">
  47.   <ul>
  48.     <li><a href="#">11111111111111111!</a></li>
  49.     <li><a href="#">22222222222222222!</a></li>
  50.     <li><a href="#">33333333333333333!</a></li>
  51.     <li><a href="#">44444444444444444!</a></li>
  52.   </ul>
  53. </div>
  54. </div>
  55.  
  56. <script language="JavaScript">
  57. <!--
  58.  
  59. function scrollObject(marqueesHeight, elemId) {
  60.     var stopscroll = false;
  61.  
  62.     var scrollElem = document.getElementById(elemId);
  63.     with (scrollElem) {
  64.         style.height    = marqueesHeight;
  65.         style.overflow  = 'hidden';
  66.         noWrap          = true;
  67.     }
  68.  
  69.     scrollElem.onmouseover = function() {
  70.         stopscroll = true;
  71.     }
  72.     scrollElem.onmouseout = function() {
  73.         stopscroll = false;
  74.     }
  75.  
  76.     var divs = scrollElem.getElementsByTagName('div');
  77.     var scrollmessage1;
  78.     var scrollmessage2;
  79.     if (divs.length > 0) {
  80.         scrollmessage1 = divs[0];
  81.         scrollmessage2 = scrollmessage1.cloneNode(true)
  82.         scrollElem.appendChild(scrollmessage2);
  83.     }
  84.  
  85.     var currentTop = 0;
  86.     var stoptime   = 0;
  87.     var delaytime  = 120;
  88.  
  89.     function init_srolltext() {
  90.         scrollElem.scrollTop = 0;       
  91.     }
  92.  
  93.     this.start = function(s, delay) {
  94.         init_srolltext();
  95.         setDelay(delay);
  96.         setInterval(s + '.scrollUp()', 10);
  97.     }
  98.  
  99.     function setDelay(delay) {
  100.         if (delay > 0) {
  101.             delaytime = delay;
  102.         }
  103.     }
  104.     
  105.     this.scrollUp = function() {
  106.         if (stopscroll) {
  107.             return;
  108.         }
  109.        
  110.         currentTop ++;
  111.         if (currentTop == marqueesHeight + 1) {    //控制停留时间
  112.             stoptime ++;
  113.             currentTop --;
  114.             if(stoptime == delaytime) {
  115.                 currentTop = 0;
  116.                 stoptime = 0;
  117.             }
  118.         } else {
  119.             if (scrollmessage2.offsetHeight - scrollElem.scrollTop <= 0) {
  120.                 scrollElem.scrollTop -= scrollmessage1.offsetHeight;
  121.                 scrollElem.scrollTop ++ ;
  122.             }
  123.             else{
  124.                 scrollElem.scrollTop ++;
  125.             }
  126.         }
  127.     }
  128. }
  129.  
  130. var scroll1 = new scrollObject(18, 'scroll1');
  131. scroll1.start('scroll1', 50); //停留间隔
  132.  
  133. var scroll2 = new scrollObject(18, 'scroll2');
  134. scroll2.start('scroll2');
  135.  
  136. //-->
  137. </script>
  138.  
  139. </body>
  140. </html>
标签：, , , ,

相关日志

Permalink | Trackback | Comments RSS | Print This Page | 1 条留言 »


京ICP备05059555号