Página Inicial>Tutorial de web design>Tutorial HTML

Efeito de conversão em preto e branco HTML5

Autor：Eve Cole Data da Última Atualização：2025-03-30 15:48:01

O objetivo deste exemplo é mostrar como criar um efeito de suspensão de mouse de uma imagem em escala de cinza/colorida usando HTML5 e JQuery. Antes de aparecer o HTML5, alcançar esse efeito exigia duas imagens, versões coloridas e em escala de cinza. O HTML5 agora torna a criação desse efeito mais fácil e eficiente, pois as imagens cinza serão geradas diretamente a partir do arquivo original. Espero que você ache este script útil em designs, como armários de exibição ou álbuns de fotos.

O código jQuery a seguir procurará a imagem de destino e gerará uma versão em escala de cinza. Quando o mouse é suspenso na imagem, o código muda gradualmente a imagem em escala de cinza para colorir.

  1. <MCE: scriptsrc = jQuery.min.jsmce_src = jquery.min.jstype = text/javascript> </mce: script>
  2. <MCE: scripttype = text/javascript> <!-
  4. //OnWindowLoad.Thiswaitsuntilimageshaveleded Whatsisncial
  5. $ (janela) .load (function () {
  7. // FadeInImagESSOTHERIS NÃOCOLORPOPDOCUMENTLOTLOT e TENHONWindowLoad
  8. $ (. ItemImg) .Fadein (500);
  10. // CLONEIMAGE
  11. $ ('. itemimg'). cada (function () {
  12. varel = $ (this);
  13. el.css ({position: absoluto}). wrap (<divclass = 'img_wrapper'style = display: inline-blockmce_style = display: inline-block>). clone (). addclass ('img_grayscale'). css ({posição: absoluto, z-index: 998, opacidade: 0}). inserirfore (el) .queue (function () {
  14. varel = $ (this);
  15. el.parent (). css ({width: this.width, altura: this.Height});
  16. el.dequeue ();
  17. });
  18. this.src = cinza (this.src);
  19. });
  21. // Fadeimage
  22. $ ('. ItemImg'). MouseOver (function () {
  23. $ (this) .Parent (). Find ('img: primeiro'). Stop (). Animate ({Opacity: 1}, 1000);
  24. })
  25. $ ('. img_grayscale'). mouseout (function () {
  26. $ (this) .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. for (variar = 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>
Como usar

* CITAÇÃO JQUERY.JS

* Cole o código acima

* Defina a imagem de destino (por exemplo. Post-IMG, IMG, .Gallery IMG, etc.)

* Você pode alterar a velocidade da animação (por exemplo, 1000 = 1 segundo)

compatibilidade

Pode trabalhar em qualquer navegador que suporta HTML5 e JavaScript, como Chrome, Safari e Firefox. Se o navegador não suportar o HTML5, esse efeito voltará à imagem colorida original. Nota: Se o arquivo local não funcionar no Firefox e Chrome, você deverá colocar o código HTML em um servidor da Web.

Artigos Relacionados