Le but de cet exemple est de vous montrer comment créer un effet de suspension de souris d'une image en niveaux de gris / couleur à l'aide de HTML5 et JQuery. Avant que HTML5 n'apparaisse, la réalisation de cet effet a nécessité deux images, colorées et en niveaux de gris. HTML5 rend désormais la création de cet effet plus facile et plus efficace, car les images grises seront générées directement à partir du fichier d'origine. J'espère que vous trouverez ce script utile dans des modèles tels que des armoires d'affichage ou des albums photo.
Le code jQuery suivant recherchera l'image cible et générera une version en niveaux de gris. Lorsque la souris est suspendue sur l'image, le code changera progressivement l'image en niveaux de gris en couleur.
- <mce: scriptsrc = jQuery.min.jsmce_src = jQuery.min.jstype = text / javascript> </ mce: script>
- <mce: scripttype = text / javascript> <! -
- //Onwindowload.ChiswaitSuntilimageShaveloaded whatissential
- $ (fenêtre) .load (function () {
- // fadeinimagessothereis notacolorpopDocumentload et thenonwindowload
- $ (. itemImg) .fadein (500);
- // CloneImage
- $ ('. itemImg'). Chaque (fonction () {
- varel = $ (this);
- el.css ({position: absolu}). wrap (<divclass = 'img_wrapper'style = affiche: inline-blockmce_style = affichage: en ligne de bloc>). clone (). addClass ('img_grayscale'). css ({position: absolue, z-index: 998, opacité: 0}). insertBefore (el) .queue (function () {
- varel = $ (this);
- el.parent (). css ({largeur: this.width, hauteur: this.height});
- el.dequeue ();
- });
- this.src = GraysCale (this.src);
- });
- // FADEIMAGE
- $ ('. itemImg'). MouseOver (function () {
- $ (this) .parent (). find ('img: premier'). stop (). animate ({opacity: 1}, 1000);
- })
- $ ('. IMG_GRAYSCALE'). Mouseout (function () {
- $ (this) .stop (). Animate ({opacité: 0}, 1000);
- });
- });
- // Grayscalewcanvasmethod
- functiongrayscale (src) {
- varCanvas = document.CreateElement ('Canvas');
- varctx = canvas.getContext ('2d');
- varimgobj = newImage ();
- imgobj.src = src;
- canvas.width = imgobj.width;
- canvas.height = imgobj.height;
- ctx.DrawImage (Imgobj, 0,0);
- varimgPixels = ctx.getImagedata (0,0, canvas.width, canvas.height);
- pour (variy = 0; y <imgpixels.height; y ++) {
- pour (varx = 0; x <imgpixels.width; x ++) {
- vari = (y * 4) * imgpixels.width + x * 4;
- varavg = (imgpixels.data [i] + imgpixels.data [i + 1] + imgpixels.data [i + 2]) / 3;
- imgpixels.data [i] = avg;
- imgPixels.data [i + 1] = avg;
- imgPixels.data [i + 2] = avg;
- }
- }
- ctx.putImagedata (imgpixels, 0,0,0,0, imgpixels.width, imgPixels.height);
- returnCanvas.todataurl ();
- }
- // -> </ mce: script>
Comment utiliser * Cite jquery.js
* Collez le code ci-dessus
* Définissez l'image cible (par exemple .Post-IMG, IMG, .gallery IMG, etc.)
* Vous pouvez modifier la vitesse de l'animation (par exemple, 1000 = 1 seconde)
compatibilité Peut travailler sur n'importe quel navigateur qui prend en charge HTML5 et JavaScript, tels que Chrome, Safari et Firefox. Si le navigateur ne prend pas en charge HTML5, cet effet retombera à l'image couleur d'origine. Remarque: Si le fichier local ne fonctionne pas sur Firefox et Chrome, vous devez mettre le code HTML sur un serveur Web.