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="24178817.jpg" name="page_cnt_3"/></li>  
        <li><img  border="0"  src="24178819.jpg" name="page_cnt_3"/></li>  
         <li><img border="0" src="24178817.jpg" name="page_cnt_3"/></li>  
        <li><img  border="0"  src="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> 
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。