https://saki-anime.com/lib/jquery.syg_rollover.1.7.js

1/*****************************************
2
3jQuery.syg_rollover
4version 1.5
5Hiroshi Fukuda <[email protected]>
6http://sygnas.jp/
7
8The MIT License
9
10Copyright (c) 2011-2012 Hiroshi Fukuda, http://sygnas.jp/
11
12------------------------
132013.10.15 ver1.7
14	オプション「onClick」を追加。
15
162013.10.08 ver1.6
17	ターゲット画像に class="lazy" が含まれていたら、
18	画像ファイル名は「data-original」属性から取得するように変更。
19
202013.06.29 ver1.5
21	メソッド「release()」を追加。選択状態を解除する。
22
232012.11.24 ver1.4
24	オプション「toggle」を追加。アクティブなものが押されたらアクティブ解除する。
25
26
27/*****************************************
28
29/*****************************************
30= example 1 =
31
32	<img src="img/swap_01.png" width="78" height="55" class="swap" />
33	<img src="img/swap_02.png" width="78" height="55" class="swap" />
34
35	<script>
36		new $.SygRollover( '.swap' );
37	</script>
38
39
40= example 2 =
41
42	<img src="img/swap_01.png" width="78" height="55" class="swap2" />
43	<img src="img/swap_02.png" width="78" height="55" class="swap2 active" />
44
45	<script>
46		new $.SygRollover( '.swap2', { radio:true } );
47	</script>
48
49*****************************************/
50/*****************************************
51= common parameters =
52
53	mode			"swap" / "scroll" / "fade"
54	radio			false / true
55					radio group
56	onClick			function(id){}
57
58= swap mode parameters =
59	swapExt			"-over"
60					"file.jpg" and "file-over.jpg"
61
62= fade mode parameters =
63			
64	fadeOverTime	200
65	fadeOutTime		1000
66	fadeOverOpacity	0.5
67	fadeOutOpacity	1
68
69= common parameters =
70
71	scrollEasing	"swing" / "linear"
72					jquery.easing.js is required if you would like to use other easings. 
73	scrollTime		200
74	scrollOver		[x,y]
75	scrollOut		[x,y]
76	effectTarget	"self" or function
77
78					function( target ){
79						return $(target).prev();
80						
81					}
82*****************************************/
83/*****************************************
84= method =
85
86select( num )
87	指定番号のボタンを選択状態にする。
88	パラメータ「radio」が「true」の時に有効。
89
90relesase()
91	選択状態にあるボタンを通常状態に戻す。
92	パラメータ「radio」が「true」の時に有効。
93	
94rollover( num, exec )
95	指定番号のボタンをロールオーバー状態にする。
96	すでにロールオーバー状態なら無視されるが「exec」が「true」なら強制実行される。
97
98rollout( num, exec )
99	指定番号のボタンを通常状態にする。
100	すでに通常状態なら無視されるが「exec」が「true」なら強制実行される。
101		
102*****************************************/
103
104
105(function( jQuery ){
106	
107	/*************************
108	* constructor
109	*/
110	jQuery.SygRollover = function( target, config ){
111		
112		// default parameters
113		var defaults = {
114			mode:			'swap',
115			radio:			false,
116			select:			false,
117			effectTarget:	'self',
118			toggle:			false,
119			onClick: 		null,
120			
121			// scroll mode options
122			scrollEasing:	'swing',
123			scrollTime:		200,
124			scrollOut:		[0,0],
125			scrollOver:		[0,-10],
126			scrollSelect:	[0,-20],
127			// effectTarget:	'self',		← effectTarget に統合
128			
129			// swap mode options
130			swapExt:		'-over',
131			swapSelect:		'-select',
132			
133			// fade mode options
134			fadeOverTime:	200,
135			fadeOutTime:	1000,
136			fadeOverOpacity:0.5,
137			fadeOutOpacity:	1,
138			fadeSelect:		'-select'
139		};
140		/******/
141
142		this.opt = jQuery.extend( defaults, config );
143		this.buttons = [];
144		this.active;
145		this.onClick = this.opt.onClick;
146
147		var buttons = this.buttons;
148		var self = this;
149		
150		
151		
152		// initialize
153		var opt = this.opt;
154		var count = 0;
155		
156		jQuery( target ).each( function(){
157			
158			var effectTarget;
159
160			// set scroll target
161			if( opt.effectTarget == 'self' ){
162				effectTarget = this;
163			}else if( typeof opt.effectTarget == 'function' ){
164				effectTarget = opt.effectTarget( this );
165			}
166			
167			// select mode
168			switch( opt.mode ){
169				
170				case "swap":
171					buttons.push( new jQuery.SygRolloverSwap( this, effectTarget, opt ) );
172					break;
173				case "scroll":
174					buttons.push( new jQuery.SygRolloverScroll( this, effectTarget, opt ) );
175					break;
176				case "fade":
177					buttons.push( new jQuery.SygRolloverFade( this, effectTarget, opt ) );
178					break;
179			}
180
181			this.sygRolloverID = count;
182			
183			if( jQuery(this).is('.active') ){
184				
185				if( opt.select ){
186					self.select( count );
187				}else{
188					self.rollover( count, true );
189					self.active = buttons[count];
190				}
191			}else{
192				self.rollout( count, true );
193			}
194			
195			count ++;
196			
197		});
198		
199		/*****************************
200		* hover setting
201		*/
202		jQuery( target ).hover(
203			jQuery.proxy(
204				function( e ){
205					self.rollover( e.currentTarget.sygRolloverID ) ;
206				},
207				self
208			),
209			jQuery.proxy(
210				function( e ){
211					self.rollout( e.currentTarget.sygRolloverID ) ;
212				},
213				self
214			)
215		);
216		
217		/*****************************
218		* click setting
219		*/
220		jQuery( target ).click( function( e ){
221			
222			var id = e.currentTarget.sygRolloverID;
223			
224			// オプション「toggle」が true の時、押されたものがアクティブなら解除
225			if( opt.toggle ){
226				
227				if( self.buttons[id] == self.active ){

228					jQuery( self.active.target ).removeClass('active');
229					self.rollout( self.active.target.sygRolloverID, true );
230					self.active = null;
231				}else{
232					self.select( id );
233				}
234			}else{
235				self.select( id );
236			}
237
238			if( self.onClick ){
239				self.onClick(id);
240			}
241			
242		});
243		
244	};
245	
246	/*****************************
247	* release button
248	*/
249	jQuery.SygRollover.prototype.release = function(){
250		var opt = this.opt;
251		
252		if( !opt.radio ) return;
253		
254		// remove active
255		if( this.active ){
256			jQuery( this.active.target ).removeClass('active');
257			this.rollout( this.active.target.sygRolloverID, true );
258		}
259	}
260	
261	/*****************************
262	* select button
263	*/
264	jQuery.SygRollover.prototype.select = function( id ){
265		var opt = this.opt;
266		
267		if( !opt.radio ) return;
268		
269		// remove active
270		if( this.active ){
271			jQuery( this.active.target ).removeClass('active');
272			this.rollout( this.active.target.sygRolloverID, true );
273		}
274
275		
276		// set active
277		jQuery( this.buttons[id].target ).addClass('active');
278		this.active = this.buttons[ id ];
279		
280		if( opt.select ){
281			this.buttons[id].select();
282		}else{
283			this.rollover( id, true );
284		}
285	}
286	
287	/*****************************
288	* set rollover
289	*/
290	jQuery.SygRollover.prototype.rollover = function( id, exec ){
291		var opt = this.opt;
292		
293		// すでにアクティブだったら抜ける。ただし exec==true だったら強制実行
294		if( !exec && this.buttons[id].isActive() ){ return; }
295		
296		this.buttons[id].rollover();
297	}
298	
299	/*****************************
300	* set rollout
301	*/
302	jQuery.SygRollover.prototype.rollout = function( id, exec ){
303		var opt = this.opt;
304		
305		// すでにアクティブだったら抜ける。ただし exec==true だったら強制実行
306		if( !exec && this.buttons[id].isActive() ){ return; }
307		
308		this.buttons[id].rollout();
309	}
310	
311	/*****************************
312	* set rollout
313	*/
314	var makeFilename = function( filename, ext ){
315		var dotpos = filename.lastIndexOf('.');
316		return filename.substr(0,dotpos) + ext + filename.substr(dotpos);
317	}
318	
319	/////////////////////////////////////////////////
320	// swap class
321	/////////////////////////////////////////////////
322	
323	/**************
324	* constructor
325	*/
326	jQuery.SygRolloverSwap = function( target, effectTarget, opt ){
327		this.target = target;
328		this.effectTarget = effectTarget;
329
330		var $effectTarget = $(effectTarget);
331		
332		if( $effectTarget.hasClass('lazy') ){
333			this.imgsrc = $effectTarget.data('original');
334		}else{
335			this.imgsrc = effectTarget.src;
336		}
337		this.imgsrc_over = makeFilename( this.imgsrc, opt.swapExt );
338
339		// cache rollover image
340		var hoverImg = new Image();
341		hoverImg.src = this.imgsrc_over;
342		
343		// select image
344		if( opt.select ){
345			this.imgsrc_select = makeFilename( this.imgsrc, opt.swapSelect );
346			var selectImg = new Image();
347			selectImg.src = this.imgsrc_select;
348		}
349	}
350	
351	/**************
352	* is Active
353	*/
354	jQuery.SygRolloverSwap.prototype.isActive = function(){
355		return jQuery(this.target).is('.active');
356	}
357	
358	/**************
359	* rollover
360	*/
361	jQuery.SygRolloverSwap.prototype.rollover = function(){
362		this.effectTarget.src = this.imgsrc_over;
363	}
364	
365	/**************
366	* rollout
367	*/
368	jQuery.SygRolloverSwap.prototype.rollout = function(){
369		this.effectTarget.src = this.imgsrc;
370	}
371
372	/**************
373	* select
374	*/
375	jQuery.SygRolloverSwap.prototype.select = function(){
376		this.effectTarget.src = this.imgsrc_select;
377	}
378	
379	/////////////////////////////////////////////////
380	// scroll class
381	/////////////////////////////////////////////////
382	
383	/**************
384	* constructor
385	*/
386	jQuery.SygRolloverScroll = function( target, effectTarget, opt ){
387		this.target = target;
388		this.effectTarget = effectTarget;
389		this.opt = opt;
390	}
391	
392	/**************
393	* is Active
394	*/
395	jQuery.SygRolloverScroll.prototype.isActive = function(){
396		return jQuery(this.target).is('.active');
397	}
398	
399	/**************
400	* rollover
401	*/
402	jQuery.SygRolloverScroll.prototype.rollover = function(){
403		var opt = this.opt;
404		var x = opt.scrollOver[0];
405		var y = opt.scrollOver[1];
406		

407		jQuery(this.effectTarget).stop(true,false)
408		.animate( {left:x, top:y}, opt.scrollTime, opt.scrollEasing );
409	}
410	
411	/**************
412	* rollout
413	*/
414	jQuery.SygRolloverScroll.prototype.rollout = function(){
415		var opt = this.opt;
416		var x = opt.scrollOut[0];
417		var y = opt.scrollOut[1];
418		
419		jQuery(this.effectTarget).stop(true,false)
420		.animate( {left:x, top:y}, opt.scrollTime, opt.scrollEasing );
421	}
422	
423	/**************
424	* select
425	*/
426	jQuery.SygRolloverScroll.prototype.select = function(){
427		var opt = this.opt;
428		var x = opt.scrollSelect[0];
429		var y = opt.scrollSelect[1];
430		
431		jQuery(this.effectTarget).stop(true,false)
432		.animate( {left:x, top:y}, 0 );
433	}
434	
435
436	/////////////////////////////////////////////////
437	// fade class
438	/////////////////////////////////////////////////
439	
440	/**************
441	* constructor
442	*/
443	jQuery.SygRolloverFade = function( target, effectTarget, opt ){
444		this.target = target;
445		this.effectTarget = effectTarget;
446		this.opt = opt;
447
448		var $effectTarget = $(effectTarget);
449		
450		if( $effectTarget.hasClass('lazy') ){
451			this.imgsrc = $effectTarget.data('original');
452		}else{
453			this.imgsrc = effectTarget.src;
454		}
455		this.imgsrc_select = makeFilename( this.imgsrc, opt.fadeSelect );
456	}
457	
458	/**************
459	* is Active
460	*/
461	jQuery.SygRolloverFade.prototype.isActive = function(){
462		return jQuery(this.target).is('.active');
463	}
464	
465	/**************
466	* rollover
467	*/
468	jQuery.SygRolloverFade.prototype.rollover = function(){
469		var opt = this.opt;
470		
471//		this.effectTarget.src = this.imgsrc;
472		
473		jQuery(this.effectTarget).stop(true,false)
474			.animate( {opacity:opt.fadeOverOpacity}, opt.fadeOverTime, 'swing' );
475	}
476	
477	/**************
478	* rollout
479	*/
480	jQuery.SygRolloverFade.prototype.rollout = function(){
481		var opt = this.opt;
482		var x = opt.scrollOut[0];
483		var y = opt.scrollOut[1];
484		
485		this.effectTarget.src = this.imgsrc;
486		
487		jQuery(this.effectTarget).stop(true,false)
488			.animate( {opacity:opt.fadeOutOpacity}, opt.fadeOutTime, 'swing' );
489	}
490	
491	/**************
492	* select
493	*/
494	jQuery.SygRolloverFade.prototype.select = function(){
495		this.effectTarget.src = this.imgsrc_select;
496		jQuery( this.effectTarget ).stop(true,false).css('opacity',1);
497	}
498
499	
500})( jQuery );
501