文章简介: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":&