今天用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. <html> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  5.         <title>Untitled Document</title> 
  6.         <style type="text/css"> 
  7.         ul,li{list-style:none; margin:0; padding:0;} 
  8.         .scroll{ width:500px; height:168px; overflow:hidden; border:1px solid #333; margin:50px auto 0;} 
  9.         .scroll li{ width:500px; height:24px; line-height:25px; overflow:hidden;} 
  10.         .scroll li a{ font-size:14px; font-family:"宋体";color:#333; text-decoration:none;} 
  11.         .scroll li a:hover{ text-decoration:underline;} 
  12.     </style> 
  13.     </head> 
  14.     <body> 
  15. <script src="test.js" type="text/javascript"></script> 
  16. <div class="scroll">  
  17.     <ul id="marqueebox0">  
  18.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  19.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  20.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  21.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  22.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  23.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  24.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  25.     </ul>  
  26. </div>  
  27. <br/> 
  28. <div class="scroll">  
  29.     <ul id="marqueebox1">  
  30.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  31.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  32.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  33.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  34.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  35.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  36.         <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  37.     </ul>  
  38. </div>  
  39. <script type="text/javascript"> 
  40. GLOBAL.marquee(24,20,3000,0);  
  41. GLOBAL.marquee(24,20,3000,1); 
  42. </script>  
  43.     </body> 
  44. </html>

调用的方式 如上面的截图所示 GLOBAL.marquee("一个要滚动的li的高度",“speed”,“delay”,“索引第几个ID”)!

JS代码如下:

 

 
    
  1. /** 
  2.  * @author tugenhua 
  3.  * @ email tugenhua@126.com 
  4.  * Javascript封装文字向上滚动组件 
  5.  * 下面是通过传参的方式给函数传参数 这样可以在页面上可以多次调用 
  6.  * 定于一个全局对象 目的是为了减少与其他人函数同名 
  7.  * 参数 lh指li的高度 speed指速度 delay是指延时 index是ID的第几个 
  8.  */ 
  9. var GLOBAL = {}; 
  10. GLOBAL.marquee = function(lh,speed,delay,index){ 
  11.     var t,s = false,objH; // s=false 是指默认情况下是滚动的 当s=true是不滚动的 
  12.     var eID = document.getElementById("marqueebox" +index);  
  13.     eID.innerHTML +=eID.innerHTML; 
  14.     eID.style.marginTop = 0; 
  15.     eID.onmouseover = function(){ 
  16.         s = true
  17.     } 
  18.     eID.onmouseout = function(){ 
  19.         s = false
  20.     } 
  21.     function eStart(){ 
  22.         objH = eID.offsetHeight; 
  23.         eID.style.height = objH; 
  24.         t = setInterval(eScroll,speed); 
  25.         if(!s){eID.style.marginTop = parseInt(eID.style.marginTop)-1 + "px"//目的是为了文字向上滚动时 让容器变为负数 
  26.     } 
  27.     function eScroll(){ 
  28.         if(parseInt(eID.style.marginTop)%lh!=0){ 
  29.             eID.style.marginTop = parseInt(eID.style.marginTop)-1 + "px"
  30.             if(Math.abs(parseInt(eID.style.marginTop))>=objH/2) eID.style.marginTop = 0; 
  31.         }else
  32.             clearInterval(t);
  33.             setTimeout(eStart,delay); 
  34.         } 
  35.     } 
  36.     setTimeout(eStart,delay);
  37. }

为了以后的维护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这个方法!!下面添加了附件 如果有不明白的地方 可以下载附件看看!!!