素材网 素材网

jQuery制作遮罩局部效果鼠标点击图片遮罩并带有图片提示介绍

下载资源()次

阅读次数()次

发布时间:2014-01-23

jQuery制作遮罩局部效果鼠标点击图片遮罩并带有图片提示介绍
分享到:

用法简介:

来源:xw素材网

jQuery制作遮罩局部效果鼠标点击图片遮罩特效并带有图片提示介绍。

jquery代码展示:

$(function() {
	//main div
	var $portfolio	= $('#portfolio');
	//click event for the image : 
	//show the overlay
	$portfolio.find('.image_wrap').bind('click',function(){
		var $elem	= $(this);
		var $image	= $elem.find('img:first');
		$image.stop(true)
			  .animate({
				'width'	:'400px',
				'height':'400px'
			  },250);
			  
		//the overlay is the next element
		var opacity	= '1';
		if($.browser.msie)
			opacity	= '0.5'
		$elem.next()
			 .stop(true)
			 .animate({
				'width'		:'500px',
				'height'	:'500px',
				'marginTop'	:'-250px',
				'marginLeft':'-250px',
				'opacity'	:opacity
			},250,function(){
				//fade in the annotations
				$(this).find('img').fadeIn();
			});
	});
	//click event for the overlay :
	//show the image again and hide the overlay
	$portfolio.find('.zoom_overlay').bind('click',function(){
		var $elem	= $(this);
		var $image	= $elem.prev()
						   .find('img:first');
		//hide overlay
		$elem.find('img')
			 .hide()
			 .end()
			 .stop(true)
			 .animate({
				'width'		:'400px',
				'height'	:'400px',
				'marginTop'	:'-200px',
				'marginLeft':'-200px',
				'opacity'	:'0'
			 },125,function(){
				//hide overlay
				$(this).hide();
			 });
			 
		//show image	 
		$image.stop(true)
			  .animate({
				'width':'500px',
				'height':'500px'
			  },250);
	});
});


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。