一个垂直滚动的插件

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

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

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

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

Code
 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/

转载于:https://www.cnblogs.com/trance/archive/2009/05/19/trance.html