https://shanpress.com/js/jquery.marquee.js

1/*!
2 * Marquee - JS for Debug
3 * @licence Marquee - v1.0 (2015-01-20)
4 * http://56hm.com/ | Licence: MIT
5 */
6/*
7 * @name pluginName
8 * @Rely jQuery v1.7+
9 * @License MIT
10 *
11 * github resource repository:
12 *   https://github.com/repar
13 *
14 * usage as:
15 * m1. $.fn.pluginName({...}); 
16 * m2. $(...).pluginName({...});
17 *
18 * author: repar
19 * website: http://www.56hm.com
20 * email: [email protected],  [email protected]
21 * qq: 47558328
22 */
23;(function($, window, document, undefined){
24
25    // Create the defaults once
26    var pluginName = "marquee",
27
28    defaults = {
29       enable : true,  //plug-in is enabled
30       direction: 'vertical',   //运动方向.  vertical : horizontal
31       itemSelecter : 'li',  //子节点选择器
32       delay: 3000,  //动画渲染延迟时间
33       speed: 1,  //动画渲染距离.
34       timing: 1, //动画渲染速率.
35       mouse: true //鼠标移入停止动画
36
37    };
38
39
40    function Widget(element, options) {
41        this.element = element;
42        this.settings = $.extend({}, defaults, options);
43        this._defaults = defaults;
44        this._name = pluginName;
45        this.version = 'v1.0';
46
47        
48        this.$element = $(this.element);
49        this.$wrapper = this.$element.parent();
50        this.$items = this.$element.children(this.settings.itemSelecter);
51
52
53        this.next = 0;
54        this.timeoutHandle;
55        this.intervalHandle
56
57        if(!this.settings.enable)return; //检测插件是否开启.
58        this.init();
59    }
60
61
62    Widget.prototype = {
63
64       init:function(){
65
66            var that = this;
67
68           //子节点占用总高度.
69            var totalSize = 0;
70
71            $.each(this.$items, function(index, element){
72
73                totalSize += that.isHorizontal() 
74                            ? parseInt($(element).outerWidth())
75                            : parseInt($(element).outerHeight());
76
77            }); 
78            
79            //父节点实际高度
80            var elmentTotalSize = this.isHorizontal()
81               ? this.$element.outerWidth
82               : this.$element.outerHeight;
83
84            //判断子节点总高度是否大于父节点高度, 否则插件停止运行.
85            if(totalSize < elmentTotalSize)return;
86
87            //设置动画渲染所需的CSS样式.
88            this.$wrapper.css({
89                 
90                position : 'relative',
91                overflow : 'hidden'
92
93            });
94
95            this.$element.css({
96
97                 position : 'absolute',
98                 top : 0,
99                 left: 0
100
101            });
102
103            this.$element.css(this.isHorizontal() ? 'width' : 'height', '1000%');
104
105
106            //克隆子节点.
107            this.cloneAllItems();
108
109            //鼠标监听
110            if(this.settings.mouse)
111                     this.addHoverEvent(this);
112
113            this.timer(this);
114
115            
116       },
117
118       /**
119         * 计时器.
120         */
121        timer : function(that){
122
123            this.timeoutHandle = setTimeout(function(){that.play(that)}, this.settings.delay);
124
125        },
126
127
128        /**
129         * 播放.
130         */
131        play : function(that){
132
133
134           this.clearTimeout();
135
136            var target = 0;
137
138            for(var i = 0; i <= this.next; i++){
139                 
140                 target -= this.isHorizontal()
141                    ? parseInt($(this.$items.get(this.next)).outerWidth())
142                    : parseInt($(this.$items.get(this.next)).outerHeight());
143                    
144
145            }
146
147            this.intervalHandle = setInterval(function(){that.animate(target)},this.settings.timing);
148        },
149
150
151        /**
152         * 动画渲染.
153         */
154        animate : function(target){
155
156            var mark = this.isHorizontal() ? 'left' : 'top';
157
158            var present =  parseInt(this.$element.css(mark));
159
160  
161            if(present > target)
162            {
163                if(present - this.settings.speed <= target)
164                {
165                     this.$element.css(mark, target);
166                
167                }else
168
169                     this.$element.css(mark, present - this.settings.speed);
170
171            }else{
172
173
174                this.clearInterval();
175
176                if(this.next + 1 < this.$items.length){
177                     
178                     this.next++;
179                    
180                }else{
181
182                    this.next = 0;
183                    this.$element.css(mark,0);
184                    
185                }
186                this.timer(this);
187            }
188
189        },
190
191
192        isHorizontal : function(){
193
194            return this.settings.direction == 'horizontal';
195        },
196
197        /**
198         * 克隆子节点
199         */
200        cloneAllItems: function(){
201
202            this.$element.append(this.$items.clone());
203        },
204
205
206
207        /**
208         * 取消时钟队列.
209         */
210        clearTimeout : function(){
211            
212            clearTimeout(this.timeoutHandle);
213        },
214
215        /**
216         * 取消定时器队列.
217         */
218        clearInterval : function(){
219            
220            clearInterval(this.intervalHandle);
221        },
222        
223        /**

224         * 暂停动画渲染.
225         * @return {[type]} [description]
226         */
227        addHoverEvent : function(that){
228
229            this.$wrapper
230              .mouseenter(function(){
231                   
232                   that.clearInterval()
233                   that.clearTimeout();
234
235              })
236              .mouseleave(function(){
237
238                   that.play(that);
239
240              });
241        }
242
243
244
245    }//prototype
246    
247
248    $.fn[pluginName] = function(options) {
249
250        // chain jQuery functions
251        return this.each(function() {
252            if (!$.data(this, "plugin_" + pluginName)) {
253                $.data(this, "plugin_" + pluginName, new Widget(this, options));
254            }
255        });
256
257    };
258
259})(jQuery, window, document);
260