https://gashapon.jp/js/jquery.marquee.js

1/*!
2 * Marquee jQuery Plug-in
3 *
4 * Copyright 2009 Giva, Inc. (http://www.givainc.com/labs/) 
5 * 
6 * Licensed under the Apache License, Version 2.0 (the "License");
7 * you may not use this file except in compliance with the License.
8 * You may obtain a copy of the License at
9 * 
10 * 	http://www.apache.org/licenses/LICENSE-2.0
11 * 
12 * Unless required by applicable law or agreed to in writing, software
13 * distributed under the License is distributed on an "AS IS" BASIS,
14 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 * See the License for the specific language governing permissions and
16 * limitations under the License.
17 *
18 * Date: 2009-05-20
19 * Rev:  1.0.01
20 */
21;(function($){
22	// set the version of the link select
23	$.marquee = {version: "1.0.01"};
24	
25	$.fn.marquee = function(options) {
26		var method = typeof arguments[0] == "string" && arguments[0];
27		var args = method && Array.prototype.slice.call(arguments, 1) || arguments;
28		// get a reference to the first marquee found
29		var self = (this.length == 0) ? null : $.data(this[0], "marquee");
30		
31		// if a method is supplied, execute it for non-empty results
32		if( self && method && this.length ){
33
34			// if request a copy of the object, return it			
35			if( method.toLowerCase() == "object" ) return self;
36			// if method is defined, run it and return either it's results or the chain
37			else if( self[method] ){
38				// define a result variable to return to the jQuery chain
39				var result;
40				this.each(function (i){
41					// apply the method to the current element
42					var r = $.data(this, "marquee")[method].apply(self, args);
43					// if first iteration we need to check if we're done processing or need to add it to the jquery chain
44					if( i == 0 && r ){
45						// if this is a jQuery item, we need to store them in a collection
46						if( !!r.jquery ){
47							result = $([]).add(r);
48						// otherwise, just store the result and stop executing
49						} else {
50							result = r;
51							// since we're a non-jQuery item, just cancel processing further items
52							return false;
53						}
54					// keep adding jQuery objects to the results
55					} else if( !!r && !!r.jquery ){
56						result = result.add(r);
57					}
58				});
59
60				// return either the results (which could be a jQuery object) or the original chain
61				return result || this;
62			// everything else, return the chain
63			} else return this;
64		// initializing request
65		} else {
66			// create a new marquee for each object found
67			return this.each(function (){
68				new $.Marquee(this, options);
69			});
70		};
71	};
72
73	$.Marquee = function (marquee, options){
74		options = $.extend({}, $.Marquee.defaults, options);
75		
76		var self = this, $marquee = $(marquee), $lis = $marquee.find("> li"), current = -1, hard_paused = false, paused = false, loop_count = 0;
77
78		// store a reference to this marquee
79		$.data($marquee[0], "marquee", self);
80		
81		// pause the marquee
82		this.pause = function (){
83			// mark as hard pause (no resume on hover)
84			hard_paused = true;
85			// pause scrolling
86			pause();
87		}
88		
89		// resume the marquee
90		this.resume = function (){
91			// mark as hard pause (no resume on hover)
92			hard_paused = false;
93			// resume scrolling
94			resume();
95		}
96		
97		// update the marquee
98		this.update = function (){
99			var iCurrentCount = $lis.length;
100
101			// update the line items
102			$lis = $marquee.find("> li");
103			
104			// if we only have one item, show the next item by resuming playback (which will scroll to the next item)
105			if( iCurrentCount <= 1 ) resume();
106		}
107
108		// code to introduce the new marquee message
109		function show(i){
110			// if we're already scrolling an item, stop processing
111			if( $lis.filter("." + options.cssShowing).length > 0 ) return false;
112			
113			var $li = $lis.eq(i);
114			
115			// run the beforeshow callback
116			if( $.isFunction(options.beforeshow) ) options.beforeshow.apply(self, [$marquee, $li]);
117
118			var params = {
119				top: (options.yScroll == "top" ? "-" : "+") + $li.outerHeight() + "px"
120				, left: 0
121			};
122			
123			$marquee.data("marquee.showing", true);
124			$li.addClass(options.cssShowing);
125	
126			$li.css(params).animate({top: "0px"}, options.showSpeed, options.fxEasingShow, function (){ 
127				// run the show callback
128				if( $.isFunction(options.show) ) options.show.apply(self, [$marquee, $li]);
129				$marquee.data("marquee.showing", false);
130				scroll($li);
131			});
132		}
133
134		// keep the message on the screen for the user to read, scrolling long messages
135		function scroll($li, delay){
136			// if paused, stop processing
137			if( paused == true ) return false;
138

139			// get the delay speed
140			delay = delay || options.pauseSpeed;
141			// if	item is wider than marquee, then scroll
142			if( doScroll($li) ){
143				setTimeout(function (){
144					// if paused, stop processing (we need to check to see if the pause state has changed)
145					if( paused == true ) return false;
146
147					var width = $li.outerWidth(), endPos = width * -1, curPos = parseInt($li.css("left"), 10);
148
149					// scroll the message to the left					
150					$li.animate({left: endPos + "px"}, ((width + curPos) * options.scrollSpeed), options.fxEasingScroll, function (){ finish($li); });
151				}, delay);
152			} else if ( $lis.length > 1 ){
153				setTimeout(function (){
154					// if paused, stop processing (we need to check to see if the pause state has changed)
155					if( paused == true ) return false;
156
157					// scroll the message down
158					$li.animate({top: (options.yScroll == "top" ? "+" : "-") + $marquee.innerHeight() + "px"}, options.showSpeed, options.fxEasingScroll);
159					// finish showing this message
160					finish($li);
161				}, delay);
162			}
163			
164		}
165		
166		function finish($li){
167			// run the aftershow callback, only after we've displayed the first option
168			if( $.isFunction(options.aftershow) ) options.aftershow.apply(self, [$marquee, $li]);
169			
170			// mark that we're done scrolling this element
171			$li.removeClass(options.cssShowing);
172			
173			// show the next message
174			showNext();
175		}
176
177		// this function will pause the current animation
178		function pause(){
179			// mark the message as paused
180			paused = true;
181			// don't stop animation if we're just beginning to show the marquee message
182			if( $marquee.data("marquee.showing") != true ){
183				// we must dequeue() the animation to ensure that it does indeed stop animation
184				$lis.filter("." + options.cssShowing).dequeue().stop();
185			}
186		}
187		
188		// this function will resume the previous animation
189		function resume(){
190			// mark the message as resumed
191			paused = false;
192			// don't resume animation if we haven't completed introducing the message
193			if( $marquee.data("marquee.showing") != true ) scroll($lis.filter("." + options.cssShowing), 1);
194		}
195
196		// determine if we should pause on hover
197		if( options.pauseOnHover ){
198			$marquee.hover(
199				function (){
200					// if hard paused, prevent hover events
201					if( hard_paused ) return false;
202					// pause scrolling
203					pause();
204				}
205				, function (){
206					// if hard paused, prevent hover events
207					if( hard_paused ) return false;
208					// resume scrolling
209					resume();
210				}
211			);
212		}
213		
214		// determines if the message needs to be scrolled to read
215		function doScroll($li){
216			return ($li.outerWidth() > $marquee.innerWidth());
217		}
218
219		// show the next message in the queue		
220		function showNext(){
221			// increase the current counter (starts at -1, to indicate a new marquee beginning)
222			current++;
223			
224			// if we only have 1 entry and it doesn't need to scroll, just cancel processing
225			if( current >= $lis.length ){
226				// if we've reached our loop count, cancel processing
227				if( !isNaN(options.loop) && options.loop > 0 && (++loop_count >= options.loop ) ) return false;
228				current = 0;
229			} 
230			
231			// show the next message
232			show(current);
233		}
234		
235		// run the init callback
236		if( $.isFunction(options.init) ) options.init.apply(self, [$marquee, options]);
237		
238		// show the first item
239		showNext();
240	};
241
242	$.Marquee.defaults = {
243		  yScroll: "top"                          // the position of the marquee initially scroll (can be either "top" or "bottom")
244		, showSpeed: 850                          // the speed of to animate the initial dropdown of the messages
245		, scrollSpeed: 12                         // the speed of the scrolling (keep number low)
246		, pauseSpeed: 5000                        // the time to wait before showing the next message or scrolling current message
247		, pauseOnHover: true                      // determine if we should pause on mouse hover
248		, loop: -1                                // determine how many times to loop through the marquees (#'s < 0 = infinite)
249		, fxEasingShow: "swing"                   // the animition easing to use when showing a new marquee
250		, fxEasingScroll: "linear"                // the animition easing to use when showing a new marquee
251
252		// define the class statements
253		, cssShowing: "marquee-showing"
254
255		// event handlers
256		, init: null                              // callback that occurs when a marquee is initialized
257		, beforeshow: null                        // callback that occurs before message starts scrolling on screen
258		, show: null                              // callback that occurs when a new marquee message is displayed
259		, aftershow: null                         // callback that occurs after the message has scrolled
260	};
261
262})(jQuery);