Главная страница>Учебник по веб-дизайну>Учебник по HTML

HTML5 изображение черно -белого эффекта преобразования

Автор：Eve Cole Время обновления：2025-03-30 15:48:01

Цель этого примера состоит в том, чтобы показать вам, как создать эффект подвески мыши из серого изображения/цвета с использованием HTML5 и jQuery. Перед появлением HTML5 для достижения этого эффекта потребовалось два изображения, цветные и серые версии. HTML5 теперь делает создание этого эффекта проще и более эффективным, поскольку серые изображения будут генерироваться непосредственно из исходного файла. Я надеюсь, что вы найдете этот сценарий полезным в таких дизайнах, как дисплей или фотоальбомы.

Следующий код jQuery будет искать целевое изображение и генерировать версию серого. Когда мышь приостановлена ​​на изображении, код постепенно изменяет изображение серого на цвет.

  1. <mce: scriptsrc = jquery.min.jsmce_src = jquery.min.jstype = text/javascript> </mce: script>
  2. <mce: scripttype = text/javascript> <!-
  4. //Onwindowload.thiswaitsuntilimagesheshaveloaded
  5. $ (window) .load (function () {
  7. // FadeInimagesSothereis notacolorpopdocumentload и затем загрузка
  8. $ (. ITEMIMG) .FADEIN (500);
  10. // клонимаж
  11. $ ('. itemimg'). ealh (function () {
  12. varel = $ (это);
  13. el.css ({position: absolute}). wrap (<divclass = 'img_wrapper'style = display: inline blockmce_style = display: inline-block>). clone (). addclass ('img_grayscale'). CSS ({положение: абсолютное, z-index: 998, непрозрачность: 0}). insertbefore (el) .queue (function () {
  14. varel = $ (это);
  15. el.parent (). css ({width: this.width, высота: this.height});
  16. el.dequeue ();
  17. });
  18. this.src = greyscale (this.src);
  19. });
  21. // FadeImage
  22. $ ('. itemimg'). mouseover (function () {
  23. $ (this) .parent (). find ('img: First'). Stop (). Animate ({opacity: 1}, 1000);
  24. })
  25. $ ('. img_grayscale'). Mouseout (function () {
  26. $ (this) .stop (). Animate ({opacity: 0}, 1000);
  27. });
  28. });
  30. // greyscalewcanvasmethod
  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. for (vary = 0; y <imgpixels.height; y ++) {
  41. for (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>
Как использовать

* Цитата jQuery.js

* Вставьте приведенный выше код

* Установите целевое изображение (например.

* Вы можете изменить скорость анимации (например, 1000 = 1 секунда)

совместимость

Может работать над любым браузером, который поддерживает HTML5 и JavaScript, такой как Chrome, Safari и Firefox. Если браузер не поддерживает HTML5, этот эффект вернется к исходному цветному изображению. Примечание. Если локальный файл не работает на Firefox и Chrome, вы должны поместить HTML -код на веб -сервер.

Связанные статьи