html添加悬浮图片,HTML5和jQuery制作网页灰度图片悬浮效果_js

文章简介：html5和jquery的灰度图片悬浮效果.

在这个教程中，作者使用HTML5的canvas将针对网站图片做不同的灰度处理。这个演示中使用HTML5和jQuery的黄金组合来动态的克隆颜色来实现灰度效果。整个显示非常炫。是学习HTML5 canvas的不错实战教程。

jQuery 代码：

// 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("

").clone().addClass(“img_grayscale”).css({"position":"absolute","z-index":"998","opacity":&