今天又折腾了一个jQuery图片效果

今天又折腾了一个jQuery图片效果,图片黑白显示,当鼠标移到图片时渐变为彩色。因为网站以灰色调为主,所以就想用用这样一个效果。在网上搜索了半天都是采用CSS滤镜来实现的,但这个方法只对IE浏览器有效,于是放弃了。经过一番苦苦搜寻,终于找到了这个用jQuery实现的方法,只在IE6.0下无效。实现方法不难:

一、链接jQuery.js文件

二、在头部<head> </head> 间粘贴代码:

<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
		$(".cat-img img,.cat-img1 img,.meitu  img").fadeIn(500);

		// clone image
		$('.cat-img img,.cat-img1 img,.meitu  img').each(function(){
			var el = $(this);
			el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass
('img_grayscale').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
		$('.cat-img img,.cat-img1 img,.meitu  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 < imgPixels.height; y++){
			for(var x = 0; x < imgPixels.width; 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();
    }

</script>
三、设置目标图像的id或class(例如.post-img, img, .gallery img等等)
四、更改动画的速度(例如1000=1秒)
原文链接  http://webdesignerwall.com/tutorials/html5-grayscale-image-hover
演示看本站首页

 


标签:  |  | 
将此文分享到:


转载请注明来自风腾网-wordpress企业主题,本文地址:http://fengten.com/542.html
除非注明,风腾网-wordpress企业主题文章均为原创,转载请注明出处和链接!
友荐云推荐

相关文章

39 条评论

  1. IPANT 发表:

    今天又找了个德国1G空间,速度好像挺快的,我去扔个博客测试瞧瞧去 :lol: 嗯,传输速度比西班牙的快唉 :mrgreen: 瞧瞧去 :lol:

  2. IPANT 发表:

    再说你连百度的广告都挂上了,百度还能不收入你的文章页吗,我对百度没好感,估计百度对我也没好感哈哈 :lol: 速度感觉在国外的服务器还算是快的,我去看看综艺节目,看看今天能传完不呵呵,对了月流量好像是100G?反正很大的,就是不知道能免费多久咯

  3. DuUst 发表:

    有的地方贵,有的地方便宜。找正规网站注册就可以了。一般续费60元/年,新注册的有些有优惠40-60不等。华夏名网在做活动,首年39,续费60.我的opeza.com在他们那注册的。http://sudu.cn 如果你不想受国内的很多限制,也可以用支付宝在国外注册,http://www.godaddy.com 这个支持支付宝,并且可以搜索优惠码用,你自己选择吧

    • DuUst 发表:

      嗯,因为以灰度为主,所以一直在找这个效果,彩色多了感觉有点乱。广告的彩色是败笔

      • 枝辛明雨 发表:

        我也不这么觉得吧,可能咱们受apple的影响还是蛮深刻的,我最初也是走的这条路线,后来觉得多点颜色也没有什么不好……

  4. steven 发表:

    不错的方法,用插件的话效果更多更酷。但请教下博主。调用jQuery为什么只有首页起效果。到别页就没了。

*

*

顶部 友荐云推荐