素材网 素材网

jquery制作缩略图效果与变焦和滑动的标题效果

下载资源()次

阅读次数()次

发布时间:2014-05-27

jquery制作缩略图效果与变焦和滑动的标题效果
分享到:

用法简介:

来源:xw素材网

jquery制作缩略图效果与变焦和滑动的标题效果。
文件引用:

<script type="text/javascript" charset="utf-8" src='js/jquery.js'></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function(){
	//set and get some variables
	var thumbnail = {
		imgIncrease : 100, /* the image increase in pixels (for zoom) */
		effectDuration : 400, /* the duration of the effect (zoom and caption) */
		/* 
		get the width and height of the images. Going to use those
		for 2 things:
			make the list items same size
			get the images back to normal after the zoom 
		*/
		imgWidth : $('.thumbnailWrapper ul li').find('img').width(), 
		imgHeight : $('.thumbnailWrapper ul li').find('img').height() 
	};
	//make the list items same size as the images
	$('.thumbnailWrapper ul li').css({ 
		'width' : thumbnail.imgWidth, 
		'height' : thumbnail.imgHeight 
	});
	//when mouse over the list item...
	$('.thumbnailWrapper ul li').hover(function(){
		$(this).find('img').stop().animate({
			/* increase the image width for the zoom effect*/
			width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
			/* we need to change the left and top position in order to 
			have the zoom effect, so we are moving them to a negative
			position of the half of the imgIncrease */
			left: thumbnail.imgIncrease/2*(-1),
			top: thumbnail.imgIncrease/2*(-1)
		},{ 
			"duration": thumbnail.effectDuration,
			"queue": false
		});
		//show the caption using slideDown event
		$(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);
	//when mouse leave...
	}, function(){
		//find the image and animate it...
		$(this).find('img').animate({
			/* get it back to original size (zoom out) */
			width: thumbnail.imgWidth,
			/* get left and top positions back to normal */
			left: 0,
			top: 0
		}, thumbnail.effectDuration);
		//hide the caption using slideUp event
		$(this).find('.caption').slideUp(thumbnail.effectDuration);
	});
});
</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

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

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

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

邮箱订阅

什么是邮箱订阅?

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