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 }

垂直滚动

•  [无锡]锡多家银行下调首套房贷利率 大多可打九五折
•  [无锡]总投资达35亿元 医疗\"巨无 ...
•  [苏州]2011年净利润下降34% 世联今年继续过冬
•  [无锡]开发商营销手段难忽悠 一成首付条件适合对象
•  [苏州]观点时评：房价“合理回归”周期中房企破局之路
•  [苏州]部分房企大鳄逆市拿地 土地储备消化风险隐现
•  [苏州]楼评：海尚壹品 值得一品！
•  [无锡]玉兰花园热势受捧 绿城品牌再续传奇
•  [无锡]芙蓉山庄全景洋房 有品质更有品位
•  [无锡]梧桐水岸A3户型 105㎡3室2厅1卫解析
•  [无锡]梧桐水岸准现房 超高性价比挑战改善型居住需求
•  [无锡]走出长三角面向全国 解放环路商圈还缺少什么
•  [无锡]置业支招: 折扣乱讲价难 如何才能买到底价房
•  [无锡]谢国忠: 房地产泡沫已爆了 大幅降价才是出路
•  [无锡]限价一周年楼市进精确调控期 房价下跌成定局
•  [苏州]何** 参与购房回馈活动 “购房大回馈！有买还有 ...
•  [苏州]2012.3.19 -2012.3.25苏州楼市 ...
•  [无锡]2012年无锡市03月26日楼市成交日报 商品房 ...
•  [无锡]房产投资趋向保守 仅5.3%开发商预测房价会涨
•  [无锡]300余幢地震安置房建成豆腐渣工程 纸壳做门

水平滚动

•  [无锡]锡多家银行下调首套房贷利率 大多可打九五折
•  [无锡]总投资达35亿元 医疗\"巨无 ...
•  [苏州]2011年净利润下降34% 世联今年继续过冬
•  [无锡]开发商营销手段难忽悠 一成首付条件适合对象
•  [苏州]观点时评：房价“合理回归”周期中房企破局之路
•  [苏州]部分房企大鳄逆市拿地 土地储备消化风险隐现
•  [苏州]楼评：海尚壹品 值得一品！
•  [无锡]玉兰花园热势受捧 绿城品牌再续传奇
•  [无锡]芙蓉山庄全景洋房 有品质更有品位
•  [无锡]梧桐水岸A3户型 105㎡3室2厅1卫解析
•  [无锡]梧桐水岸准现房 超高性价比挑战改善型居住需求
•  [无锡]走出长三角面向全国 解放环路商圈还缺少什么
•  [无锡]置业支招: 折扣乱讲价难 如何才能买到底价房
•  [无锡]谢国忠: 房地产泡沫已爆了 大幅降价才是出路
•  [无锡]限价一周年楼市进精确调控期 房价下跌成定局
•  [苏州]何** 参与购房回馈活动 “购房大回馈！有买还有 ...
•  [苏州]2012.3.19 -2012.3.25苏州楼市 ...
•  [无锡]2012年无锡市03月26日楼市成交日报 商品房 ...
•  [无锡]房产投资趋向保守 仅5.3%开发商预测房价会涨
•  [无锡]300余幢地震安置房建成豆腐渣工程 纸壳做门

转载于:https://www.cnblogs.com/zhuzf/archive/2012/03/29/2422871.html