Beranda>Tutorial Desain Web>tutorial HTML

HTML5 Gambar Efek Konversi Hitam dan Putih

Penulis：Eve Cole Waktu Pembaruan：2025-03-30 15:48:01

Tujuan dari contoh ini adalah untuk menunjukkan kepada Anda cara membuat efek suspensi mouse dari gambar skala abu -abu/warna menggunakan HTML5 dan jQuery. Sebelum HTML5 muncul, mencapai efek ini membutuhkan dua gambar, versi berwarna dan abu -abu. HTML5 sekarang membuat membuat efek ini lebih mudah dan lebih efisien, karena gambar abu -abu akan dihasilkan langsung dari file asli. Saya harap Anda akan menemukan skrip ini berguna dalam desain seperti lemari tampilan atau album foto.

Kode jQuery berikut akan mencari gambar target dan menghasilkan versi grayscale. Ketika mouse ditangguhkan pada gambar, kode secara bertahap akan mengubah gambar skala abu -abu menjadi berwarna.

  1. <mce: scriptsrc = jQuery.min.jsmce_src = jQuery.min.jstype = text/javascript> </cce: script>
  2. <mce: scriptType = text/javascript> <!-
  4. //OnWindowLoad.ThiswaitSuntilimageshavelaveaded yang mana
  5. $ (window) .load (function () {
  7. // fadeinimagessothereis notacolorpopdocumentload dan kemudian con -windowload
  8. $ (. ItemImg) .fadein (500);
  10. // Cloneimage
  11. $ ('. ItemImg'). masing -masing (fungsi () {
  12. varel = $ (ini);
  13. el.css ({position: absolute}). wrap (<divlass = 'img_wrapper'style = display: inline-blockmce_style = display: inline-block>). clone (). addClass ('img_grayscale'). css ({position: absolute, z-index: 998, opacity: 0}). insertBefore (el) .queue (function () {
  14. varel = $ (ini);
  15. el.parent (). css ({lebar: this.width, tinggi: this.height});
  16. el.dequeue ();
  17. });
  18. this.src = grayscale (this.src);
  19. });
  21. // fadeimage
  22. $ ('. ItemImg'). MouseOver (function () {
  23. $ (ini) .parent (). find ('img: first'). stop (). animate ({opacity: 1}, 1000);
  24. })
  25. $ ('. IMG_GRAYSCALE'). MouseOut (function () {
  26. $ (ini) .stop (). animate ({opacity: 0}, 1000);
  27. });
  28. });
  30. // GRAYSCALEWCANVASMETHOD
  31. functionGraysCale (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. untuk (vary = 0; y <imgpixels.height; y ++) {
  41. untuk (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] = rata -rata;
  45. imgpixels.data [i+1] = rata -rata;
  46. imgpixels.data [i+2] = rata -rata;
  47. }
  48. }
  49. ctx.putImagedata (imgpixels, 0,0,0,0, imgpixels.width, imgpixels.height);
  50. returnCanvas.todataurl ();
  51. }
  53. //-> </mce: script>
Cara menggunakan

* Kutipan jQuery.js

* Tempel kode di atas

* Atur gambar target (misalnya .Post-IMG, IMG, .gallery IMG, dll.)

* Anda dapat mengubah kecepatan animasi (misalnya, 1000 = 1 detik)

kesesuaian

Dapat bekerja pada browser apa pun yang mendukung HTML5 dan JavaScript, seperti Chrome, Safari, dan Firefox. Jika browser tidak mendukung HTML5, efek ini akan kembali ke gambar warna asli. Catatan: Jika file lokal tidak berfungsi pada Firefox dan Chrome, Anda harus meletakkan kode HTML di server web.

Artikel Terkait