封装文字或图片向上滚动效果_Javascript教程_H5之家

看到网上有很多文字向上滚动的js效果，自己就整理封装了一下
详细代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<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="" name="page_cnt_3"/></li>
        <li><img border="0" src="" name="page_cnt_3"/></li>
        <li><img border="0" src="" name="page_cnt_3"/></li>
        <li><img border="0" src="" 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);