jquery实现多行滚屏 -

zhongaili520

浏览: 2546 次
性别:
来自: 广州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2009-10 ( 2)
更多存档...

jquery实现多行滚屏

博客分类：

jQuery CSS J#

<html>
<head>

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
Scroller=function(config,callback){
    this.Obj=config.Obj;//滚屏对象
    this.ul=this.Obj.eq(0).find("ul:first");
    this.lineH=this.ul.find("li:first").height();
    this.line=config.line?parseInt(config.line,10):parseInt(this.Obj.height()/this.lineH,10);//滚屏行数
    this.speed=config.speed?parseInt(config.speed,10):500;//滚屏速度，越大越慢
    this.timer=config.timer?parseInt(config.timer,10):3000;//滚屏间隔时间
    this.timerID=null;
    if(this.line==0) this.line=1;
    this.upHeight=0-this.line*this.lineH;
    this.scrollUp=function(){
        this.ul.animate({
                marginTop:this.upHeight
            },this.speed,function(){
                for(var j=1;j<=this.ScrollBox.line;j++){
                    $(this).find("li:first").appendTo($(this));
                }
                $(this).css({marginTop:0});
        });
        var SBox=this;
        SBox.timerID=setTimeout(function(){
            GobalScroll.apply(this,[SBox]);
        },SBox.timer);
    }
    this.ul[0].ScrollBox=this;
    this.stop=function(){
        var ScrollBox=this.ScrollBox;
        clearTimeout(ScrollBox.timerID);
    }

    this.scroll=function(){
        var ScrollBox=this.ScrollBox;
        ScrollBox.timerID=setTimeout(function(){
            GobalScroll.apply(this,[ScrollBox]);
        },ScrollBox.timer);
    }

    this.ul.hover(this.stop,this.scroll);
    var ScrollBox1=this;
    ScrollBox1.timerID=setTimeout(function(){
        GobalScroll.apply(this,[ScrollBox1]);
    },ScrollBox1.timer);
}

function GobalScroll(obj){
    obj.scrollUp();
}
</script>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{{width:200px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:20px;padding-left:10px;}
</style>
</head>
<body>

<p>多行滚动演示：</p>
<div id="scrollDiv">
<ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
     <li><a href="#">4</a></li>
     <li><a href="#">5</a></li>
     <li><a href="#">6</a></li>
     <li><a href="#">7</a></li>
     <li><a href="#">8</a></li>
     <li><a href="#">9</a></li>

</ul>
</div>
<script type="text/javascript">
var news=new Scroller({line:4,speed:1000,timer:4000,Obj:$("#scrollDiv")});

</script>
</body>
</html>

分享到：