1/***************************************** 2 3jQuery.syg_rollover 4version 1.4 5Hiroshi Fukuda <[email protected]> 6http://sygnas.jp/ 7 8The MIT License 9 10Copyright (c) 2011-2012 Hiroshi Fukuda, http://sygnas.jp/ 11 12------------------------ 132012.11.24 ver1.4 14 IvVutogglevðÇÁBANeBuÈà̪³ê½çANeBuð·éB 15 16 17/***************************************** 18 19/***************************************** 20= example 1 = 21 22 <img src="img/swap_01.png" width="78" height="55" class="swap" /> 23 <img src="img/swap_02.png" width="78" height="55" class="swap" /> 24 25 <script> 26 new $.SygRollover( '.swap' ); 27 </script> 28 29 30= example 2 = 31 32 <img src="img/swap_01.png" width="78" height="55" class="swap2" /> 33 <img src="img/swap_02.png" width="78" height="55" class="swap2 active" /> 34 35 <script> 36 new $.SygRollover( '.swap2', { radio:true } ); 37 </script> 38 39*****************************************/ 40/***************************************** 41= common parameters = 42 43 mode "swap" / "scroll" / "fade" 44 radio false / true 45 radio group 46 47= swap mode parameters = 48 swapExt "-over" 49 "file.jpg" and "file-over.jpg" 50 51= fade mode parameters = 52 53 fadeOverTime 200 54 fadeOutTime 1000 55 fadeOverOpacity 0.5 56 fadeOutOpacity 1 57 58= common parameters = 59 60 scrollEasing "swing" / "linear" 61 jquery.easing.js is required if you would like to use other easings. 62 scrollTime 200 63 scrollOver [x,y] 64 scrollOut [x,y] 65 effectTarget "self" or function 66 67 function( target ){ 68 return $(target).prev(); 69 70 } 71 72*****************************************/ 73 74 75(function( jQuery ){ 76 77 /************************* 78 * constructor 79 */ 80 jQuery.SygRollover = function( target, config ){ 81 82 // default parameters 83 var defaults = { 84 mode: 'swap', 85 radio: false, 86 select: false, 87 effectTarget: 'self', 88 toggle: false, 89 90 // scroll mode options 91 scrollEasing: 'swing', 92 scrollTime: 200, 93 scrollOut: [0,0], 94 scrollOver: [0,-10], 95 scrollSelect: [0,-20], 96 // effectTarget: 'self', © effectTarget É 97 98 // swap mode options 99 swapExt: '-over', 100 swapSelect: '-select', 101 102 // fade mode options 103 fadeOverTime: 200, 104 fadeOutTime: 1000, 105 fadeOverOpacity:0.5, 106 fadeOutOpacity: 1, 107 fadeSelect: '-select' 108 }; 109 /******/ 110 111 this.opt = jQuery.extend( defaults, config ); 112 this.buttons = []; 113 this.active; 114 115 var buttons = this.buttons; 116 var self = this; 117 118 119 120 // initialize 121 var opt = this.opt; 122 var count = 0; 123 124 jQuery( target ).each( function(){ 125 126 var effectTarget; 127 128 // set scroll target 129 if( opt.effectTarget == 'self' ){ 130 effectTarget = this; 131 }else if( typeof opt.effectTarget == 'function' ){ 132 effectTarget = opt.effectTarget( this ); 133 } 134 135 // select mode 136 switch( opt.mode ){ 137 138 case "swap": 139 buttons.push( new jQuery.SygRolloverSwap( this, effectTarget, opt ) ); 140 break; 141 case "scroll": 142 buttons.push( new jQuery.SygRolloverScroll( this, effectTarget, opt ) ); 143 break; 144 case "fade": 145 buttons.push( new jQuery.SygRolloverFade( this, effectTarget, opt ) ); 146 break; 147 } 148 149 this.sygRolloverID = count; 150 151 if( jQuery(this).is('.active') ){ 152 153 if( opt.select ){ 154 self.select( count ); 155 }else{ 156 self.rollover( count, true ); 157 self.active = buttons[count]; 158 } 159 }else{ 160 self.rollout( count, true ); 161 } 162 163 count ++; 164 165 }); 166 167 /***************************** 168 * hover setting 169 */ 170 jQuery( target ).hover( 171 jQuery.proxy( 172 function( e ){ 173 self.rollover( e.currentTarget.sygRolloverID ) ; 174 }, 175 self 176 ), 177 jQuery.proxy( 178 function( e ){ 179 self.rollout( e.currentTarget.sygRolloverID ) ; 180 }, 181 self 182 ) 183 ); 184 185 /***************************** 186 * click setting 187 */ 188 jQuery( target ).click( function( e ){ 189 190 var id = e.currentTarget.sygRolloverID; 191 192 // IvVutogglevª true ÌA³ê½à̪ANeBuÈçð 193 if( opt.toggle ){ 194 195 if( self.buttons[id] == self.active ){
196 jQuery( self.active.target ).removeClass('active'); 197 self.rollout( self.active.target.sygRolloverID, true ); 198 self.active = null; 199 }else{ 200 self.select( id ); 201 } 202 }else{ 203 self.select( id ); 204 } 205 206 }); 207 208 }; 209 210 /***************************** 211 * select button 212 */ 213 jQuery.SygRollover.prototype.select = function( id ){ 214 var opt = this.opt; 215 216 if( !opt.radio ) return; 217 218 // remove active 219 if( this.active ){ 220 jQuery( this.active.target ).removeClass('active'); 221 this.rollout( this.active.target.sygRolloverID, true ); 222 } 223 224 // set active 225 jQuery( this.buttons[id].target ).addClass('active'); 226 this.active = this.buttons[ id ]; 227 228 if( opt.select ){ 229 this.buttons[id].select(); 230 }else{ 231 this.rollover( id, true ); 232 } 233 } 234 235 /***************************** 236 * set rollover 237 */ 238 jQuery.SygRollover.prototype.rollover = function( id, exec ){ 239 var opt = this.opt; 240 241 if( !exec && this.buttons[id].isActive() ){ return; } 242 243 this.buttons[id].rollover(); 244 } 245 246 /***************************** 247 * set rollout 248 */ 249 jQuery.SygRollover.prototype.rollout = function( id, exec ){ 250 var opt = this.opt; 251 252 if( !exec && this.buttons[id].isActive() ){ return; } 253 254 this.buttons[id].rollout(); 255 } 256 257 /***************************** 258 * set rollout 259 */ 260 var makeFilename = function( filename, ext ){ 261 var dotpos = filename.lastIndexOf('.'); 262 return filename.substr(0,dotpos) + ext + filename.substr(dotpos); 263 } 264 265 ///////////////////////////////////////////////// 266 // swap class 267 ///////////////////////////////////////////////// 268 269 /************** 270 * constructor 271 */ 272 jQuery.SygRolloverSwap = function( target, effectTarget, opt ){ 273 this.target = target; 274 this.effectTarget = effectTarget; 275 276 this.imgsrc = effectTarget.src; 277 this.imgsrc_over = makeFilename( this.imgsrc, opt.swapExt ); 278 279 // cache rollover image 280 var hoverImg = new Image(); 281 hoverImg.src = this.imgsrc_over; 282 283 // select image 284 if( opt.select ){ 285 this.imgsrc_select = makeFilename( this.imgsrc, opt.swapSelect ); 286 var selectImg = new Image(); 287 selectImg.src = this.imgsrc_select; 288 } 289 } 290 291 /************** 292 * is Active 293 */ 294 jQuery.SygRolloverSwap.prototype.isActive = function(){ 295 return jQuery(this.target).is('.active'); 296 } 297 298 /************** 299 * rollover 300 */ 301 jQuery.SygRolloverSwap.prototype.rollover = function(){ 302 this.effectTarget.src = this.imgsrc_over; 303 } 304 305 /************** 306 * rollout 307 */ 308 jQuery.SygRolloverSwap.prototype.rollout = function(){ 309 this.effectTarget.src = this.imgsrc; 310 } 311 312 /************** 313 * select 314 */ 315 jQuery.SygRolloverSwap.prototype.select = function(){ 316 this.effectTarget.src = this.imgsrc_select; 317 } 318 319 ///////////////////////////////////////////////// 320 // scroll class 321 ///////////////////////////////////////////////// 322 323 /************** 324 * constructor 325 */ 326 jQuery.SygRolloverScroll = function( target, effectTarget, opt ){ 327 this.target = target; 328 this.effectTarget = effectTarget; 329 this.opt = opt; 330 } 331 332 /************** 333 * is Active 334 */ 335 jQuery.SygRolloverScroll.prototype.isActive = function(){ 336 return jQuery(this.target).is('.active'); 337 } 338 339 /************** 340 * rollover 341 */ 342 jQuery.SygRolloverScroll.prototype.rollover = function(){ 343 var opt = this.opt; 344 var x = opt.scrollOver[0]; 345 var y = opt.scrollOver[1]; 346 347 jQuery(this.effectTarget).stop(true,false) 348 .animate( {left:x, top:y}, opt.scrollTime, opt.scrollEasing ); 349 } 350 351 /************** 352 * rollout 353 */ 354 jQuery.SygRolloverScroll.prototype.rollout = function(){ 355 var opt = this.opt; 356 var x = opt.scrollOut[0]; 357 var y = opt.scrollOut[1]; 358 359 jQuery(this.effectTarget).stop(true,false) 360 .animate( {left:x, top:y}, opt.scrollTime, opt.scrollEasing ); 361 } 362 363 /************** 364 * select 365 */ 366 jQuery.SygRolloverScroll.prototype.select = function(){ 367 var opt = this.opt; 368 var x = opt.scrollSelect[0]; 369 var y = opt.scrollSelect[1]; 370 371 jQuery(this.effectTarget).stop(true,false) 372 .animate( {left:x, top:y}, 0 ); 373 } 374 375 376 ///////////////////////////////////////////////// 377 // fade class 378 ///////////////////////////////////////////////// 379 380 /************** 381 * constructor 382 */ 383 jQuery.SygRolloverFade = function( target, effectTarget, opt ){ 384 this.target = target; 385 this.effectTarget = effectTarget; 386 this.opt = opt; 387 388 389 this.imgsrc = effectTarget.src; 390 this.imgsrc_select = makeFilename( this.imgsrc, opt.fadeSelect ); 391 } 392 393 /************** 394 * is Active 395 */ 396 jQuery.SygRolloverFade.prototype.isActive = function(){ 397 return jQuery(this.target).is('.active'); 398 } 399 400 /************** 401 * rollover 402 */ 403 jQuery.SygRolloverFade.prototype.rollover = function(){ 404 var opt = this.opt; 405 406 this.effectTarget.src = this.imgsrc; 407
408 jQuery(this.effectTarget).stop(true,false) 409 .animate( {opacity:opt.fadeOverOpacity}, opt.fadeOverTime, 'swing' ); 410 } 411 412 /************** 413 * rollout 414 */ 415 jQuery.SygRolloverFade.prototype.rollout = function(){ 416 var opt = this.opt; 417 var x = opt.scrollOut[0]; 418 var y = opt.scrollOut[1]; 419 420 this.effectTarget.src = this.imgsrc; 421 422 jQuery(this.effectTarget).stop(true,false) 423 .animate( {opacity:opt.fadeOutOpacity}, opt.fadeOutTime, 'swing' ); 424 } 425 426 /************** 427 * select 428 */ 429 jQuery.SygRolloverFade.prototype.select = function(){ 430 this.effectTarget.src = this.imgsrc_select; 431 jQuery( this.effectTarget ).stop(true,false).css('opacity',1); 432 } 433 434 435})( jQuery ); 436
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.