HTML5 and jquery

HTML5 and jqueryHow can we achieve the effect of gradient and beautiful web images? Use HTML5 and jquery to create a grayscale/color gradient. Before HTML5 appears, to achieve this similar gradient effect, you need two pictures: a color image and a gray image. You can use a drawing tool to achieve the gradient effect. Now HTML5 allows developers to use HTML5 and jquery to achieve the effect of gradient and beautiful web page images.

 

HTML 5 and jquery dynamically convert any color image to grayscale display.

 

HTML5 and jquery show you how to create a grayscale/colored image with the mouse floating effect. Before the emergence of HTML5, two images, a color image and a grayscale image version are required to achieve this effect. Now HTML5 makes it easier and more efficient for developers to create this effect, because the original image will generate a grayscale image directly.

 

Jquery code:

 

The following jquery code looks for images on the Web page to generate a grayscale image version, which is directly displayed in the browser. When the mouse is hovering over the image, the code will gradually change the grayscale image to a color image.

 

<MCE: script src = "jquery. Min. js" mce_src = "jquery. Min. js" type = "text/JavaScript"> </MCE: SCRIPT>

<MCE: Script Type = "text/JavaScript"> <! --

// On Window load. This waits until images have loaded which is essential

$ (Window). Load (function (){

// Fade in images so there isn't a color "pop" document load and then on window Load

$ (". Item IMG"). fadein (500 );

// Clone Image

$ ('. Item IMG'). Each (function (){

VaR El = $ (this );

El.css ({"position": "absolute "}). wrap ("<Div class = 'img _ wrapper 'style =" display: inline-block "mce_style =" display: inline-block ">" mirror.clone().addclass('img_grayscale'mirror.css ({"position ": "Absolute", "Z-index": "998", "opacity": "0 "}). insertbefore (EL ). queue (function (){

VaR El = $ (this );

El.parent().css ({"width": This. Width, "height": This. Height });

El. dequeue ();

});

This. src = grayscale (this. SRC );

});

// Fade Image

$ ('. Item IMG'). Mouseover (function (){

$ (This). Parent (). Find ('img: first'). Stop (). animate ({opacity: 1}, 1000 );

})

$ ('. Img_grayscale'). mouseout (function (){

$ (This). Stop (). animate ({opacity: 0}, 1000 );

});

});

// Grayscale W canvas Method

Function grayscale (SRC ){

VaR canvas = Document. createelement ('canvas ');

VaR CTX = canvas. getcontext ('2d ');

VaR imgobj = new image ();

Imgobj. src = SRC;

Canvas. width = imgobj. width;

Canvas. Height = imgobj. height;

CTX. drawimage (imgobj, 0, 0 );

VaR imgpixels = CTX. getimagedata (0, 0, canvas. Width, canvas. Height );

For (var y = 0; y

For (VAR x = 0; x

VaR I = (y * 4) * imgpixels. Width + x * 4;

VaR AVG = (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 );

Return canvas. todataurl ();

}

// --> </MCE: SCRIPT>

 

Usage:

 

• Reference jquery. js

Jquery. JS: http://code.google.com/p/jqueryjs/downloads/list

 

• Paste the above Code

 

• Set the target image (for example,. Post-IMG, IMG,. Gallery IMG, and so on)

 

• You can change the animation speed (for example, 3000 = 3 seconds)

 

Compatibility:

 

This code can work in any browser that supports HTML5 and JavaScript, such as Google Chrome, Safari, and Firefox. If the browser does not support HTML5 images, the original color images will be displayed. If the local machine cannot work normally, you can put the HTML code on the Web server for testing.

 

Example: HTML5 grayscale gradient (http://webdesignerwall.com/demo/html5-grayscale)

 

The website content is organized and edited by the Css3-Html5 House (if you have any questions, please leave a message at the Css3-Html5 House)

Css3-Html5 home, professional exchange learning platform.