今天用Jquery写了一个文字向上滚动效果 很想用javascript把他封装起来 在网上找了下资料 也看了一些代码 用他们的思路来写我要的js，所以我用了3个小时就把他们封装起来 当然一个页面可以多次调用  下面来看看HTML/CSS代码

 

 
   
     
    
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    2.  
    
  2. <html> 
    3.  
    
  3.     <head> 
    4.  
    
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    5.  
    
  5.         <title>Untitled Document</title> 
    6.  
    
  6.         <style type="text/css"> 
    7.  
    
  7.         ul,li{list-style:none; margin:0; padding:0;} 
    8.  
    
  8.         .scroll{ width:500px; height:168px; overflow:hidden; border:1px solid #333; margin:50px auto 0;} 
    9.  
    
  9.         .scroll li{ width:500px; height:24px; line-height:25px; overflow:hidden;} 
    10.  
    
  10.         .scroll li a{ font-size:14px; font-family:"宋体";color:#333; text-decoration:none;} 
    11.  
    
  11.         .scroll li a:hover{ text-decoration:underline;} 
    12.  
    
  12.     </style> 
    13.  
    
  13.     </head> 
    14.  
    
  14.     <body> 
    15.  
    
  15. <script src="test.js" type="text/javascript"></script> 
    16.  
    
  16. <div class="scroll">  
    17.  
    
  17.     <ul id="marqueebox0">  
    18.  
    
  18.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
    19.  
    
  19.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
    20.  
    
  20.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
    21.  
    
  21.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
    22.  
    
  22.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
    23.  
    
  23.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
    24.  
    
  24.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
    25.  
    
  25.     </ul>  
    26.  
    
  26. </div>  
    27.  
    
  27. <br/> 
    28.  
    
  28. <div class="scroll">  
    29.  
    
  29.     <ul id="marqueebox1">  
    30.  
    
  30.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
    31.  
    
  31.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
    32.  
    
  32.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
    33.  
    
  33.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
    34.  
    
  34.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
    35.  
    
  35.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
    36.  
    
  36.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
    37.  
    
  37.     </ul>  
    38.  
    
  38. </div>  
    39.  
    
  39. <script type="text/javascript"> 
    40.  
    
  40. GLOBAL.marquee(24,20,3000,0);  
    41.  
    
  41. GLOBAL.marquee(24,20,3000,1); 
    42.  
    
  42. </script>  
    43.  
    
  43.     </body> 
    44.  
    
  44. </html> 
    45.  
   
 
   
调用的方式 如上面的截图所示 GLOBAL.marquee("一个要滚动的li的高度"，“speed”，“delay”，“索引第几个ID”)！
 
   
JS代码如下：
 
   
 
 
   
 
   
     
    
  1. /** 
    2.  
    
  2.  * @author tugenhua 
    3.  
    
  3.  * @ email tugenhua@126.com 
    4.  
    
  4.  * Javascript封装文字向上滚动组件 
    5.  
    
  5.  * 下面是通过传参的方式给函数传参数 这样可以在页面上可以多次调用 
    6.  
    
  6.  * 定于一个全局对象 目的是为了减少与其他人函数同名 
    7.  
    
  7.  * 参数 lh指li的高度 speed指速度 delay是指延时 index是ID的第几个 
    8.  
    
  8.  */ 
    9.  
    
  9. var GLOBAL = {}; 
    10.  
    
  10. GLOBAL.marquee = function(lh,speed,delay,index){ 
    11.  
    
  11.     var t,s = false,objH; // s=false 是指默认情况下是滚动的 当s=true是不滚动的 
    12.  
    
  12.     var eID = document.getElementById("marqueebox" +index);  
    13.  
    
  13.     eID.innerHTML +=eID.innerHTML; 
    14.  
    
  14.     eID.style.marginTop = 0; 
    15.  
    
  15.     eID.onmouseover = function(){ 
    16.  
    
  16.         s = true; 
    17.  
    
  17.     } 
    18.  
    
  18.     eID.onmouseout = function(){ 
    19.  
    
  19.         s = false; 
    20.  
    
  20.     } 
    21.  
    
  21.     function eStart(){ 
    22.  
    
  22.         objH = eID.offsetHeight; 
    23.  
    
  23.         eID.style.height = objH; 
    24.  
    
  24.         t = setInterval(eScroll,speed); 
    25.  
    
  25.         if(!s){eID.style.marginTop = parseInt(eID.style.marginTop)-1 + "px"} //目的是为了文字向上滚动时 让容器变为负数 
    26.  
    
  26.     } 
    27.  
    
  27.     function eScroll(){ 
    28.  
    
  28.         if(parseInt(eID.style.marginTop)%lh!=0){ 
    29.  
    
  29.             eID.style.marginTop = parseInt(eID.style.marginTop)-1 + "px"; 
    30.  
    
  30.             if(Math.abs(parseInt(eID.style.marginTop))>=objH/2) eID.style.marginTop = 0; 
    31.  
    
  31.         }else{ 
    32.  
    
  32.             clearInterval(t); 
    33.  
    
  33.             setTimeout(eStart,delay); 
    34.  
    
  34.         } 
    35.  
    
  35.     } 
    36.  
    
  36.     setTimeout(eStart,delay); 
    37.  
    
  37. } 
    38.  
   
 
   
为了以后的维护js时候 担心函数同名的问题 所以我就一开始定义一个空对象 然后空对象.函数名就可以尽量避免函数同名问题！下面的是我理解的思路
 
   
1 定义函数名通过传参的方式来实现要js在页面上多次调用！巧妙的利用index。
 
   
2 通过获取ID后 让外层ul内部元素li的长度×2，这样就实现循环循环滚动，一开始定义个局部变量 s 默认情况下false 滚动 当我鼠标是移上去时候 设置为true 停止 当鼠标移开时候 让他又滚动起来！
 
   
3 进入eStart这个函数 先获取ul的高度 然后巧妙的运用这句代码"parseInt(eID.style.marginTop)-1 +'px'",使的eID.marginTop变为负数 因为我们知道文字向上滚动一定是负数的！所以用了这种方法！
 
   
4 进入eScroll这个函数 进行判断 如果对象的marginTop对对象的高度求余数 如果余数不等于0的话 让他继续 再进行判断 滚动的marginTop>=objH/2 让他们滚动到0，为什么要除2 因为对象高度是原来的两倍 所以要除去2 等到原来没有×2的高度 如果大于的话 让他返回marginTop等于0 否则的话 再继续eStart这个方法！！下面添加了附件 如果有不明白的地方 可以下载附件看看！！！