« 功能强大,代码简单的管理菜单[ASP]无限级分类的简单算法实现及代码重点讲解 »

文字或图片向上滚动效果JS代码

分类: 网页设计代码 发布: roger 浏览: 日期: 2010年4月19日

文字向上滚动的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

相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-Blog 1.8 Walle Build 91204

Copyright 2008-2022 WWW.CHNJIE.COM Rights Reserved 闽ICP备16020319号