login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > JS > Afbeelding effecten > Auto reflect

Auto reflect

Auteur: http://cow.neondragon.net/ - 10 oktober 2007 - 18:47 - Gekeurd door: Stijn - Hits: 7228 - Aantal punten: (0 stemmen)




Omdat tegenwoordig Web 2.0 zo in blijkt te zijn zocht ik wat dingetjes op en kwam ik dit script tegen. Het script weerspiegelt automatisch afbeeldingen zodat je die "glassy" look verkrijgt. Het enige wat je moet doen is het javascript includen en de class "reflect" toevoegen aan je afbeelding die je gereflecteerd wil zien.

EDIT: kan geen .zip toevoegen dus zet ik het script er volledig onder

Code:
Include het script in je html pagina's (zieonderaan) en geef je images de class reflect:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!-- Script includen -->
  3. <script type="text/javascript" src="reflection.js"></script>
  4. </head>
  5.  
  6.  
  7. <!-- Class toevoegen -->
  8. <img class="reflect" src="image.jpg">


Als je wil kan je de hoogte van de reflectie aanpassen door de class te wijzigen:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <img class="reflect rheight33" src="image.jpg">

waarbij het getal bij rheight de groote van de reflectie in px is.

Je kan ook de opacity of doorzichtigheid aanpassen op deze manier:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <img class="reflect ropacity30" src="image.jpg"

Waarbij het getal bij ropacity de doorzichtigheid van de reflectie in % is.

Je kan deze funcites ook combineren!!

Problemen:
Reflectie van bewegende afbeeldingen werkt enkel in internet explorer
Reflectie van geschaalde afbeelding zullen vervormd lijken in internet explorer

Ondersteunende browsers:
Internet Explorer 5.5+
Mozilla Firefox 1.5+
Opera 9+
Safari 2+


SCRIPT:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. /**
  2.  * reflection.js v1.7
  3.  *
  4.  * Contributors: Cow http://cow.neondragon.net
  5.  *               Gfx http://www.jroller.com/page/gfx/
  6.  *               Sitharus http://www.sitharus.com
  7.  *               Andreas Linde http://www.andreaslinde.de
  8.  *               Tralala, coder @ http://www.vbulletin.org
  9.  *
  10.  * Freely distributable under MIT-style license.
  11.  */
  12.  
  13. /* From prototype.js */
  14. document.getElementsByClassName = function(className) {
  15. 	var children = document.getElementsByTagName('*') || document.all;
  16. 	var elements = new Array();
  17.  
  18. 	for (var i = 0; i < children.length; i++) {
  19. 		var child = children[i];
  20. 		var classNames = child.className.split(' ');
  21. 		for (var j = 0; j < classNames.length; j++) {
  22. 			if (classNames[j] == className) {
  23. 				elements.push(child);
  24. 				break;
  25. 			}
  26. 		}
  27. 	}
  28. 	return elements;
  29. }
  30.  
  31. var Reflection = {
  32. 	defaultHeight : 0.5,
  33. 	defaultOpacity: 0.5,
  34.  
  35. 	add: function(image, options) {
  36. 		Reflection.remove(image);
  37.  
  38. 		doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }
  39. 		if (options) {
  40. 			for (var i in doptions) {
  41. 				if (!options[i]) {
  42. 					options[i] = doptions[i];
  43. 				}
  44. 			}
  45. 		} else {
  46. 			options = doptions;
  47. 		}
  48.  
  49. 		try {
  50. 			var d = document.createElement('div');
  51. 			var p = image;
  52.  
  53. 			var classes = p.className.split(' ');
  54. 			var newClasses = '';
  55. 			for (j=0;j<classes.length;j++) {
  56. 				if (classes[j] != "reflect") {
  57. 					if (newClasses) {
  58. 						newClasses += ' '
  59. 					}
  60.  
  61. 					newClasses += classes[j];
  62. 				}
  63. 			}
  64.  
  65. 			var reflectionHeight = Math.floor(p.height*options['height']);
  66. 			var divHeight = Math.floor(p.height*(1+options['height']));
  67.  
  68. 			var reflectionWidth = p.width;
  69.  
  70. 			if (document.all && !window.opera) {
  71. 				/* Fix hyperlinks */
  72.                 if(p.parentElement.tagName == 'A') {
  73. 	                var d = document.createElement('a');
  74. 	                d.href = p.parentElement.href;
  75.                 }  
  76.  
  77. 				/* Copy original image's classes & styles to div */
  78. 				d.className = newClasses;
  79. 				p.className = 'reflected';
  80.  
  81. 				d.style.cssText = p.style.cssText;
  82. 				p.style.cssText = 'vertical-align: bottom';
  83.  
  84. 				var reflection = document.createElement('img');
  85. 				reflection.src = p.src;
  86. 				reflection.style.width = reflectionWidth+'px';
  87.  
  88. 				reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';
  89. 				reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')';
  90.  
  91. 				d.style.width = reflectionWidth+'px';
  92. 				d.style.height = divHeight+'px';
  93. 				p.parentNode.replaceChild(d, p);
  94.  
  95. 				d.appendChild(p);
  96. 				d.appendChild(reflection);
  97. 			} else {
  98. 				var canvas = document.createElement('canvas');
  99. 				if (canvas.getContext) {
  100. 					/* Copy original image's classes & styles to div */
  101. 					d.className = newClasses;
  102. 					p.className = 'reflected';
  103.  
  104. 					d.style.cssText = p.style.cssText;
  105. 					p.style.cssText = 'vertical-align: bottom';
  106.  
  107. 					var context = canvas.getContext("2d");
  108.  
  109. 					canvas.style.height = reflectionHeight+'px';
  110. 					canvas.style.width = reflectionWidth+'px';
  111. 					canvas.height = reflectionHeight;
  112. 					canvas.width = reflectionWidth;
  113.  
  114. 					d.style.width = reflectionWidth+'px';
  115. 					d.style.height = divHeight+'px';
  116. 					p.parentNode.replaceChild(d, p);
  117.  
  118. 					d.appendChild(p);
  119. 					d.appendChild(canvas);
  120.  
  121. 					context.save();
  122.  
  123. 					context.translate(0,image.height-1);
  124. 					context.scale(1,-1);
  125.  
  126. 					context.drawImage(image, 0, 0, reflectionWidth, image.height);
  127.  
  128. 					context.restore();
  129.  
  130. 					context.globalCompositeOperation = "destination-out";
  131. 					var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
  132.  
  133. 					gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
  134. 					gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");
  135.  
  136. 					context.fillStyle = gradient;
  137. 					if (navigator.appVersion.indexOf('WebKit') != -1) {
  138. 						context.fill();
  139. 					} else {
  140. 						context.fillRect(0, 0, reflectionWidth, reflectionHeight*2);
  141. 					}
  142. 				}
  143. 			}
  144. 		} catch (e) {
  145. 	    }
  146. 	},
  147.  
  148. 	remove : function(image) {
  149. 		if (image.className == "reflected") {
  150. 			image.className = image.parentNode.className;
  151. 			image.parentNode.parentNode.replaceChild(image, image.parentNode);
  152. 		}
  153. 	}
  154. }
  155.  
  156. function addReflections() {
  157. 	var rimages = document.getElementsByClassName('reflect');
  158. 	for (i=0;i<rimages.length;i++) {
  159. 		var rheight = null;
  160. 		var ropacity = null;
  161.  
  162. 		var classes = rimages[i].className.split(' ');
  163. 		for (j=0;j<classes.length;j++) {
  164. 			if (classes[j].indexOf("rheight") == 0) {
  165. 				var rheight = classes[j].substring(7)/100;
  166. 			} else if (classes[j].indexOf("ropacity") == 0) {
  167. 				var ropacity = classes[j].substring(8)/100;
  168. 			}
  169. 		}
  170.  
  171. 		Reflection.add(rimages[i], { height: rheight, opacity : ropacity});
  172. 	}
  173. }
  174.  
  175. var previousOnload = window.onload;
  176. window.onload = function () { if(previousOnload) previousOnload(); addReflections(); }
Download code! Download code (.txt)

 Bekijk een voorbeeld van dit script!
 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (9)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.033s