您的位置：首页 > Web前端 > JavaScript

Javascript封装文字向上滚动组件

2011-11-20 02:02 381 查看

今天用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这个方法！！下面添加了附件如果有不明白的地方可以下载附件看看！！！

附件：http://down.51cto.com/data/2359312

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 职场 JavaScript 休闲 Javascript封装文字向上滚动组件

相关文章推荐

新的分享

章节导航