jquery.autoscroll.js jquery自动滚动效果

View Code
 1 /**
 2  + ---------------------------------------- +
 3  + AutoScroll组件v1.0
 4  + Author: zzf
 5  +    TODO: 通用性不够，仅仅实现了垂直和水平的滚动。性能问题？？
 6  + Date: 2012-3-29
 7  + ---------------------------------------- +
 8 **/
 9 /**
10  *    AutoScrol自动滚动效果
11  * @name jQuery.AutoScroll
12  * @param {object} obj 对象形式的参数
13  * @class
14  * @return  jQuery.AutoScroll instance
15  */
16 
17 $.AutoScroll = function(opts) { 
18     //如果在构造实例的时候忘了new,就重新实例化
19     if (! (this instanceof arguments.callee)) {
20         return new arguments.callee(opts);
21     }
22     //执行类似其他语言的初始化函数，利用apply指定上下文(context)为该实例，并且传入参数
23     this.init.apply(this, arguments);
24 }
25 
26 $.AutoScroll.prototype ={
27     constructor: $.AutoScroll,
28     init: function(opts) {
29         var self=this;
30         //配置属性
31         $.extend(this, {
32             wrap:null,
33             selector:'>li',    
34             scrollCount:1,
35             dir:'v',              //滚动方向,'v'垂直,'h'水平
36             interval:3000,
37             fxTime:1000
38         },opts || {});
39         this.timer=null;
40         this.run();
41     },
42     run:function (){
43         var self=this,
44             count=this.dir==='v'?'height':'width',
45             m=self.dir==='v'?'marginTop':'marginLeft';
46         self.wrap.hover(function (){
47             clearInterval(self.timer);
48             self.timer=null;
49         },function (){
50             self.timer=setInterval(function() {
51                 var scrollnum =parseFloat(self.wrap.find(self.selector+':first')[count]())*self.scrollCount,opt={};
52                 opt[m]=-scrollnum + 'px';
53                 self.wrap.animate(opt,self.fxTime,function() {
54                     self.wrap.css(m,0).find(self.selector+':lt('+self.scrollCount+')').appendTo(self.wrap);
55                 });
56             },self.interval);
57         }).trigger('mouseleave');
58     }
59 }
垂直滚动
水平滚动