一个垂直滚动的插件

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

昨天又要加上个垂直滚动的效果（意思可能是要跟文字滚动遥相呼应~~）无语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);    
     if(options) $.extend(settings,options);    
     var sht=_this.find(settings.tag).eq(0).css("height"); //取得滚动元素高度
     sht=parseInt(sht)*settings.num;   //取得每次要滚动的高度    
     var ani=function(){ //滚动函数
         _this.animate({top:-sht+"px"},settings.speed,function(){        
         for( i=0; i<settings.num; i++){ //形成循环的DOM操作
             _this.find(settings.tag).eq(0).appendTo(_this);
             }
         _this.css({"top":0}); //滚动完毕 将 top 重置为 0
         });
         }        
     itvl=setInterval(ani,settings.wait); //设置周期
 

 使用范例：

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

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

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