Angrymasteryoda Administrator
Posts : 16 Points : 46 Reputation : 0 Join date : 2010-10-21 Age : 32 Location : at the desk
| Subject: [javascript] lights off effect Wed Apr 20, 2011 12:06 pm | |
| - Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> (function(){ var im2 = new Image(); im2.src = 'http://www.ntsupply.com/images/products/97352-Wa.38x50.gif'; jQuery(function($){ var w = $(window), dimmer = $('<div style="position:fixed;z-index:-1;top:0;left:0;display:none;background-color:#000;"><\/div'), im1 = $('#onoff').toggle(lightsOut, lightsOn).css({zIndex: 11, position: 'relative', cursor: 'pointer'}).attr('src'); function dresize(){dimmer.css({height: w.height(), width: w.width()});} function lightsOut(){this.title = this.alt = 'Lights On'; this.src = im2.src; dimmer.stop().css({zIndex: 10}).animate({opacity: 0.65, duration: 'slow'});} function lightsOn(){this.title = this.alt = 'Lights Off'; this.src = im1; dimmer.stop().css({zIndex: -1}).animate({opacity: 0, duration: 'slow'});} dresize(); $('body').append(dimmer.css({opacity: 0, display: 'block'})); w.resize(dresize); }); })(); </script> </head> <body> <img id="onoff" src="http://www.ntsupply.com/images/products/97352-Wa.38x50.gif" alt="Lights Off" title="Lights Off"><br> <a href="http://www.google.com">Google</a> </body> </html> | |
|