看到网上有很多文字向上滚动的js效果，自己就整理封装了一下
详细代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字,图片向上滚动效果</title>
<style type="text/css">
body{ font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#666; line-height:2em; background:#000;}
#rollBox{ height:25px; width:220px; overflow:hidden; border:2px solid #CCC; list-style:none; margin:0; padding:0; position:relative; padding-left:5px; margin:50px auto; background:#FFf; cursor:pointer;}
#imgRollBox{ height:73px; width:229px; overflow:hidden; border:2px solid #CCC; list-style:none; margin:0; padding:0; position:relative;margin:50px auto; background:#FFf;cursor:pointer;}
ul li,ul{ margin:0; padding:0;}
img{ display:block;}
</style>
</head>
<body>
<ul id="rollBox">
<li>[1]hello world i love this job! do you?</li>
<li>[2]hello world i love this job! do you?</li>
<li>[3]hello world i love this job! do you?</li>
<li>[4]hello world i love this job! do you?</li>
<li>[5]hello world i love this job! do you?</li>
</ul>
<ul id="imgRollBox">
<li><img border="0" src="http://img1.gtimg.com/ent/pics/24178/24178817.jpg" name="page_cnt_3"/></li>
<li><img border="0" src="http://img1.gtimg.com/ent/pics/24178/24178819.jpg" name="page_cnt_3"/></li>
<li><img border="0" src="http://img1.gtimg.com/ent/pics/24178/24178817.jpg" name="page_cnt_3"/></li>
<li><img border="0" src="http://img1.gtimg.com/ent/pics/24178/24178819.jpg" name="page_cnt_3"/></li>
</ul>
<script type="text/javascript">
var rollText={
go:null,
oParentUl:null,
oUlH:null,
liArr:null,
childNode:null,
timeout:null,
run:function(id,delay){
var oLiFirst=this.liArr[0];
var liMarTop = oLiFirst.style.marginTop;
var liTopNum=parseInt(liMarTop);
var c = Math.abs(liTopNum);
if(c< parseInt(this.oUlH)){
c++;
oLiFirst.style.marginTop ='-' + c + 'px';
}else if(Math.abs(liTopNum)== parseInt(this.oUlH)){
clearInterval(this.go);
this.oParentUl.removeChild(oLiFirst);
this.oParentUl.appendChild(oLiFirst);
this.liArr[this.liArr.length-1].style.marginTop='0px';
this.timeout=setTimeout(function(obj,id,childtags,delay){return function(){obj.start(id,childtags,delay);};}(this,id,this.childNode,delay),delay);
}
},
start:function(id,childtags,delay){
this.childNode=childtags;
this.oParentUl=document.getElementById(id);
this.oUlH=this.oParentUl.currentStyle?this.oParentUl.currentStyle['height']:window.getComputedStyle(this.oParentUl,null)['height'];
this.liArr=this.oParentUl.getElementsByTagName(childtags);
for(var i=0;i<this.liArr.length;i++){
this.liArr[i].style.cssText +=';margin-top:0;height:'+this.oUlH+';line-height:'+this.oUlH+';display:block; width:100%;';
}
this.go =setInterval(
function(obj,id,delay){
return function(){obj.run(id,delay)}
}(this,id,delay),10);
this.oParentUl.onmouseover=function(obj){return function(){clearTimeout(obj.timeout);clearTimeout(obj.go);};}(this);
this.oParentUl.onmouseout=function(obj){return function(){obj.go =setInterval(function(obj,id,delay){return function(){obj.run(id,delay)};}(obj,id,delay),10);};}(this);
}
}
rollText.start('rollBox','li',1000);
function clone(){};
clone.prototype= rollText;
var obj = new clone;
obj.start('imgRollBox','li',1000);
</script>
</body>
</html>
调用用方法：
rollText.start(parent,childnode,delay);
参数说明：
param parent @type object //父节点 这里可以换成其它的 节点 不一定非要 用 ul
param childnode@type object //子节点 这里的子节点 不一定非要 用 li 你可以换成 div span 和其它标签都是可以的 js会自动设置为块级元素
param delay@type number //延迟时间 单位/ 毫秒在使用的过程中，你只需要给 父容器设置高度就可以了，内部节点会自动获得父容器的高度，不过最好有一定的css基础的话就更好了，这样你就知道该给容器设置什么样式了，
这次用的是面向对象的写法，如果要在一个页面clone 多个实例的时候 要注意。
面向对象的写法 很容易会遇到 this对象绑定的问题 里面有解决的办法 还给你 setinterval 和 setTimeout 传参的 闭包方法 不懂的朋友可以 看下代码，希望对你有帮助。
源代码展示
var rollText={
go:null,
oParentUl:null,
oUlH:null,
liArr:null,
childNode:null,
timeout:null,
run:function(id,delay){
var oLiFirst=this.liArr[0];
var liMarTop = oLiFirst.style.marginTop;
var liTopNum=parseInt(liMarTop);
var c = Math.abs(liTopNum);
if(c< parseInt(this.oUlH)){
c++;
oLiFirst.style.marginTop ='-' + c + 'px';
}else if(Math.abs(liTopNum)== parseInt(this.oUlH)){
clearInterval(this.go);
this.oParentUl.removeChild(oLiFirst);
this.oParentUl.appendChild(oLiFirst);
this.liArr[this.liArr.length-1].style.marginTop='0px';
this.timeout=setTimeout(function(obj,id,childtags,delay){return function(){obj.start(id,childtags,delay);};}(this,id,this.childNode,delay),delay);
}
},
start:function(id,childtags,delay){
this.childNode=childtags;
this.oParentUl=document.getElementById(id);
this.oUlH=this.oParentUl.currentStyle?this.oParentUl.currentStyle['height']:window.getComputedStyle(this.oParentUl,null)['height'];
this.liArr=this.oParentUl.getElementsByTagName(childtags);
for(var i=0;i<this.liArr.length;i++){
this.liArr[i].style.cssText +=';margin-top:0;height:'+this.oUlH+';line-height:'+this.oUlH+';display:block; width:100%;';
}
this.go =setInterval(
function(obj,id,delay){
return function(){obj.run(id,delay)}
}(this,id,delay),10);
this.oParentUl.onmouseover=function(obj){return function(){clearTimeout(obj.timeout);clearTimeout(obj.go);};}(this);
this.oParentUl.onmouseout=function(obj){return function(){obj.go =setInterval(function(obj,id,delay){return function(){obj.run(id,delay)};}(obj,id,delay),10);};}(this);
}
}| Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
| HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
| ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |
QQ：2693987339(点击联系)购买教程光盘
:
