杰哥个人博客|杰哥博客|厦门杰哥|杰哥主页|杰哥个人网站|杰哥网站

文字向上滚动的js效果代码下载：

向上滚动的js效果.zip

代码:

调用用方法：
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);
        
    }
}

加了鼠标悬停效果附件下载：

文字滚动效果.rar