一个垂直滚动的插件

最近网站做的中超的页面真是叫人无语
中超频道的编辑要求一大堆的效果,那些老掉牙的文字滚动啊什么的。。。整的整个页面乌烟瘴气不伦不类。彻底崩溃

昨天又要加上个垂直滚动的效果(意思可能是要跟文字滚动遥相呼应~~)无语ing```

鉴于垂直滚动可能会经常用到,就写了个小插件,本来这个插件的功能可以再强大点,比如可以控滚动方向 什么的,但是为了使用方便起见,就写的简单点,大部分的样式操作和控制还是留给了CSS。

简单说一下原理:垂直滚动其实很简单,卷上去的不可见部分让它自动排到滚动序列的最后面,这样就形成了循环。利用JQ提供的amimate 和 appendTo方法就行了。下面是我写的插件:


 1 $.fn.vsr=function(options){
 2     var itvl=false;    
 3     var settings={
 4         wait   :4000//滚动间隔 默认4秒
 5         speed  :500//滚动过程时间 500ms
 6         tag    :"div"//滚动的元素 可以设置为 ul li 等你需要的tag
 7         num    :1     //每次滚动的量 默认为一个    
 8         }        
 9     var _this=$(this);    
10     if(options) $.extend(settings,options);    
11     var sht=_this.find(settings.tag).eq(0).css("height"); //取得滚动元素高度
12     sht=parseInt(sht)*settings.num;   //取得每次要滚动的高度    
13     var ani=function(){ //滚动函数
14         _this.animate({top:-sht+"px"},settings.speed,function(){        
15         for( i=0; i<settings.num; i++){ //形成循环的DOM操作
16             _this.find(settings.tag).eq(0).appendTo(_this);
17             }
18         _this.css({"top":0}); //滚动完毕 将 top 重置为 0
19         });
20         }        
21     itvl=setInterval(ani,settings.wait); //设置周期
22 

 使用范例:

$("#zcon").vsr({
    num:
3     //每次滚动三个           
    });

$("#zcon").vsr({
    wait:
6000//滚动间隔6秒
        tag :ul,   //滚动元素为ul
        num :2     //每次滚动2个           
    });

   在线例子:http://csl.cnsoccer.titan24.com/



posted on 2009-05-19 15:53  trance  阅读(856)  评论(0编辑  收藏  举报

导航