注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

非常酷的网格缩图片切换到大图的画廊效果

jQuery插件 fishcity 712浏览

这是一款基于jquery的超强插件carouFredSel,它可以实现极多不同的动画特效,只需配置不同的参数便可实现,简单易用。今天介绍这款主题是由很多网格组成类组宝石的反光效果,当点击网格中的缩图片时,通过动感的切换方式切换到大图,当点击大图再次动感的切回到漂亮的网格模式,显示出各个缩略图。

构建html

<div id="wrapper">
	<div class="carousel">
		<div><img src="img/i01.jpg" /></div>
		<div><img src="img/i02.jpg" /></div>
		<div><img src="img/i03.jpg" /></div>
		<div><img src="img/i04.jpg" /></div>
		<div><img src="img/i05.jpg" /></div>
		<div><img src="img/i06.jpg" /></div>
		<div><img src="img/i07.jpg" /></div>
		<div><img src="img/i08.jpg" /></div>
		<div><img src="img/i09.jpg" /></div>
		<div><img src="img/i10.jpg" /></div>
	</div>
</div>

写入CSS样式

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	min-height: 600px;
	background-color: #fff;
}
body * {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 22px;
}
 
#wrapper {
	width: 800px;
	height: 500px;
	margin: -250px 0 0 -400px;
	position: absolute;
	top: 50%;
	left: 50%;
	overflow: hidden;
}
 
#wrapper,
.carousel,
.carousel div,
.carousel div img {
	width: 800px;
	height: 500px;
}
.carousel {
	float: left;
	overflow: hidden;
	cursor: pointer;
}
.carousel div {
	float: left;
	overflow: hidden;
	position: relative;
}
.carousel div img {
	border: none;
	display: block;
	float: left;
	position: absolute;
}
 
/* after js */
.carousel div.thumb img {
	width: 160px;
	height: 100px;
	left: -30px !important;
	top: 0 !important;
}

引入核心文件

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>

写入JS调用插件

$(function() {
	//	cache first carousel
	var $org = $('.carousel');
 
	//	variables
	var width = 800,
		height = 500,
		cols = 8,
		rows = 5,
		$img = $org.children()
		imgs = $img.length;
 
	//	duplicate carouesl
	for( a = 0; a < rows * cols; a++ ) {
		$('#wrapper').append( $org.clone() );
	}
	
	//	cache all carousls
	$all = $('.carousel');
	$all.each(function( i ) {
	
		//	current row and column
		var row = Math.floor( i / cols ),
			col = i % cols;
 
		var $t = $(this),
			i2 = i % imgs,
			$x = $img.eq( i2 ).clone();
 
		//	first image -> thumbnail
		$x.addClass( 'thumb' );
		$t.prepend( $x );
 
		var $d = $t.children();
 
		//	onClick start scrolling the first carousel
		$t.click(function() {
			var d = ( $t.triggerHandler( 'currentPosition' ) == 0 ) ? i2+1 : 0;
			$org.trigger( 'slideTo', d );
		});
 
		//	set width + height
		$t.add( $d ).css({
			width: width / cols,
			height: height / rows
		});
		
		//	position images
		$d.children().css({
			left: -(col * (width / cols)),
			top: -(row * (height / rows))
		});
	});
	
	//	create carousels
	$all.carouFredSel({
		circular: false,
		items: {
			visible: 1,
			width: width / cols,
			height: height / rows
		},
		scroll: {
			fx: 'directscroll',
			onBefore: function() {
				var $t = $(this);
 
				//	trigger next carousel to scroll after 25 ms.
				setTimeout(function() {
					$t.parent().next().children().trigger( 'slideTo', $t.triggerHandler( 'currentPosition' ) );
				}, 25);
			}
		}
	}).trigger( 'pause' );
});

完成以上工作,就可以实现梦幻般的jquery画廊效果了。

转载请注明:jQ酷 » 非常酷的网格缩图片切换到大图的画廊效果

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。