Startseite>Webdesign-Tutorial>HTML-Tutorial

HTML5 -Bildschwarz -Weiß -Konvertierungseffekt

Autor：Eve Cole Aktualisierungszeit：2025-03-30 15:48:01

Der Zweck dieses Beispiels ist es, Ihnen zu zeigen, wie Sie einen Maus -Suspensionseffekt eines Graustufen-/Farbbildes unter Verwendung von HTML5 und JQuery erstellen. Bevor HTML5 erschien, erforderten das Erreichen dieses Effekts zwei Bilder, farbige und Graustufenversionen. HTML5 erleichtert jetzt das Erstellen dieses Effekts, da graue Bilder direkt aus der Originaldatei generiert werden. Ich hoffe, Sie finden dieses Skript nützlich für Designs wie Display -Schränke oder Fotoalben.

Der folgende JQuery -Code sucht nach dem Zielbild und generiert eine Graustufenversion. Wenn die Maus auf dem Bild suspendiert wird, ändert der Code allmählich das Graustufenbild in die Farbe.

  1. <mce: scriptSrc = jQuery.min.jsmce_src = jQuery.min.jstype = text/javaScript> </mce: script>
  2. <MCE: scriptType = text/javaScript> <!--
  4. //Onwindowload.ThiswaitsuntilImageshaveloaded Welches Dissienential
  5. $ (Fenster) .load (function () {
  7. // fadeinimagessothereis nichtAcolorpopdocumentload und thenonWindowload
  8. $ (. itemimg) .fadein (500);
  10. // Cloneimage
  11. $ ('. itemimg'). Jede (Funktion () {
  12. varel = $ (this);
  13. EL.CSS ({Position: Absolute}). Clone (). AddClass ('img_grayscale'). CSS ({Position: Absolute, Z-Index: 998, Opazität: 0}).
  14. varel = $ (this);
  15. El.Parent (). CSS ({width: this.width, Höhe: this.height});
  16. El.Dequeue ();
  17. });
  18. this.src = grayscale (this.src);
  19. });
  21. // Fadeimage
  22. $ ('. itemimg'). mouseover (function () {
  23. $ (this) .Parent (). Find ('img: First'). Stop (). Animate ({Opazität: 1}, 1000);
  24. })
  25. $ ('. img_grayscale'). Mouseout (function () {
  26. $ (this) .Stop (). Animate ({Opazität: 0}, 1000);
  27. });
  28. });
  30. // Greyscalewcanvasethod
  31. FunktionStraysCale (src) {
  32. varcanvas = document.createelement ('canvas');
  33. varctx = canvas.getContext ('2d');
  34. Varimgobj = newImage ();
  35. imgobj.src = src;
  36. canvas.width = imgobj.width;
  37. canvas.height = imgobj.height;
  38. ctx.drawimage (imgobj, 0,0);
  39. varimgpixels = ctx.getImagedata (0,0, canvas.width, canvas.height);
  40. für (vary = 0; y <imgpixel.Height; y ++) {
  41. für (varx = 0; x <imgpixels.width; x ++) {
  42. vari = (y*4)*imgpixels.width+x*4;
  43. varavg = (imgpixels.data [i]+imgpixels.data [i+1]+imgpixels.data [i+2])/3;
  44. imgpixels.data [i] = avg;
  45. imgpixels.data [i+1] = avg;
  46. imgpixels.data [i+2] = avg;
  47. }
  48. }
  49. ctx.putimagedata (imgpixels, 0,0,0,0, imgpixels.width, imgpixels.Height);
  50. returncanvas.todataurl ();
  51. }
  53. //-> </mce: script>
Wie man benutzt

* Zitat jQuery.js

* Fügen Sie den obigen Code ein

* Legen Sie das Zielbild fest (z.

* Sie können die Geschwindigkeit der Animation ändern (z. B. 1000 = 1 Sekunde)

Kompatibilität

Kann an jedem Browser arbeiten, der HTML5 und JavaScript unterstützt, wie Chrome, Safari und Firefox. Wenn der Browser HTML5 nicht unterstützt, fällt dieser Effekt auf das ursprüngliche Farbbild zurück. Hinweis: Wenn die lokale Datei nicht auf Firefox und Chrome funktioniert, müssen Sie den HTML -Code auf einen Webserver einfügen.

Ähnliche Artikel