今天用Jquery写了一个文字向上滚动效果 很想用javascript把他封装起来 在网上找了下资料 也看了一些代码 用他们的思路来写我要的js,所以我用了3个小时就把他们封装起来 当然一个页面可以多次调用 下面来看看HTML/CSS代码
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Untitled Document</title>
- <style type="text/css">
- ul,li{list-style:none; margin:0; padding:0;}
- .scroll{ width:500px; height:168px; overflow:hidden; border:1px solid #333; margin:50px auto 0;}
- .scroll li{ width:500px; height:24px; line-height:25px; overflow:hidden;}
- .scroll li a{ font-size:14px; font-family:"宋体";color:#333; text-decoration:none;}
- .scroll li a:hover{ text-decoration:underline;}
- </style>
- </head>
- <body>
- <script src="test.js" type="text/javascript"></script>
- <div class="scroll">
- <ul id="marqueebox0">
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- </ul>
- </div>
- <br/>
- <div class="scroll">
- <ul id="marqueebox1">
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- </ul>
- </div>
- <script type="text/javascript">
- GLOBAL.marquee(24,20,3000,0);
- GLOBAL.marquee(24,20,3000,1);
- </script>
- </body>
- </html>
调用的方式 如上面的截图所示 GLOBAL.marquee("一个要滚动的li的高度",“speed”,“delay”,“索引第几个ID”)!
JS代码如下:
- /**
- * @author tugenhua
- * @ email tugenhua@126.com
- * Javascript封装文字向上滚动组件
- * 下面是通过传参的方式给函数传参数 这样可以在页面上可以多次调用
- * 定于一个全局对象 目的是为了减少与其他人函数同名
- * 参数 lh指li的高度 speed指速度 delay是指延时 index是ID的第几个
- */
- var GLOBAL = {};
- GLOBAL.marquee = function(lh,speed,delay,index){
- var t,s = false,objH; // s=false 是指默认情况下是滚动的 当s=true是不滚动的
- var eID = document.getElementById("marqueebox" +index);
- eID.innerHTML +=eID.innerHTML;
- eID.style.marginTop = 0;
- eID.onmouseover = function(){
- s = true;
- }
- eID.onmouseout = function(){
- s = false;
- }
- function eStart(){
- objH = eID.offsetHeight;
- eID.style.height = objH;
- t = setInterval(eScroll,speed);
- if(!s){eID.style.marginTop = parseInt(eID.style.marginTop)-1 + "px"} //目的是为了文字向上滚动时 让容器变为负数
- }
- function eScroll(){
- if(parseInt(eID.style.marginTop)%lh!=0){
- eID.style.marginTop = parseInt(eID.style.marginTop)-1 + "px";
- if(Math.abs(parseInt(eID.style.marginTop))>=objH/2) eID.style.marginTop = 0;
- }else{
- clearInterval(t);
- setTimeout(eStart,delay);
- }
- }
- setTimeout(eStart,delay);
- }
为了以后的维护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这个方法!!下面添加了附件 如果有不明白的地方 可以下载附件看看!!!