jquery图片九宫格样式布局图片切换



129 513 172



特效描述:jquery 九宫格样式布局 图片切换,jquery图片九宫格样式布局通过鼠标滑过缩略图进行大小图片切换展示。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif ,"新宋体";}
/* image_show */
.image_show{width:948px;padding:3px 0 0 3px;border:1px solid #d9d9d9;margin:30px auto}
.image_show .img{padding:0 3px 3px 0;position:relative;}
.image_show .img, .image_show .img img{float:left;}
.col_left{width:191px;float:left;overflow:hidden;}
.col_right{float:left;width:450px;overflow:hidden;}
#bigImg{position:relative;width:304px;height:382px;}
#bigImg .img_mask{position:absolute;left:0;top:340px;width:304px;height:42px;background:#000;opacity:0.6;filter:alpha(opacity=60);}
#bigImg p{position:absolute;left:0;top:340px;width:304px;height:42px;line-height:42px;font-size:16px;text-align:center;color:#fff;}
#bigImg p a, #bigImg p a:visited{color:#fff;}
.mask{position:absolute;left:0;top:0;background:#000;opacity:0.4;filter:alpha(opacity=40);}
.clear{height:0;clear:both;line-height:0;font-size:0;overflow:hidden;}
</style>
<script type="text/javascript">
$(function(){
	$('#smallImg img').mouseover(function(){
		$('#bigImg img').attr('src',$(this).attr('rel'));
		$('#bigImg p > a').text($(this).attr('alt'));
		$('#bigImg a').attr('href',$(this).parent().attr('href'));	
	});
	$('#smallImg .img').hover(function(){
		$('.mask').fadeIn();
		$(this).children('.mask').hide();
	},function(){
		$('.mask').fadeIn();
	});
});
</script>
<div class="image_show">
	<div class="img" id="bigImg">
		<a href="http://www.dijiuzhanzhang.com"><img height="382" width="304" alt="量变到质变:寻找你的健康Style" src="images/photo/tk3.jpg"></a>
		<div class="img_mask"></div>
		<p><a href="http://www.dijiuzhanzhang.com">量变到质变:寻找你的健康Style</a></p>
	</div>
	<div id="smallImg">
		<div class="col_left">
			<div class="img">
				<a href="http://www.dijiuzhanzhang.com"><img height="125" width="189" alt="Steinway and Sons Piano Bag 把钢琴背走 " src="images/tk1-1.jpg" rel="images/photo/tk1.jpg"></a>
				<div class="mask" style="width:189px;height:125px;display:block;"></div>
			</div>
			<div class="img">
				<a href="http://www.dijiuzhanzhang.com"><img height="125" width="189" alt="插花老师教你 DIY婚礼花带" src="images/tk2-2.jpg" rel="images/photo/tk2.jpg"></a>
				<div class="mask" style="width:189px;height:125px;display:block;"></div>
			</div>
			<div class="img">
				<a href="http://www.dijiuzhanzhang.com"><img height="125" width="189" alt="量变到质变:寻找你的健康Style" src="images/tk3-3.jpg" rel="images/photo/tk3.jpg"></a>
				<div class="mask" style="width:189px;height:125px;display:none;"></div>
			</div>
		</div>
		<div class="col_right">
			<div class="r_top">
				<div class="img">
					<a href="http://www.dijiuzhanzhang.com"><img height="172" width="274" alt="圣诞派对 “鞋”能HOLD住" src="images/tk4-4.jpg" rel="images/photo/tk4.jpg"></a>
					<div class="mask" style="width:274px;height:172px;display:block;"></div>
				</div>
				<div class="img">
					<a href="http://www.dijiuzhanzhang.com"><img height="171" width="169" alt="北海道的风土滋味:北京日料" src="images/tk5-5.jpg" rel="images/photo/tk5.jpg"></a>
					<div class="mask" style="width:169px;height:171px;display:block;"></div>
				</div>
			</div>
			<div class="clear"></div>
			<div class="r_bottom">
				<div class="img">
					<a href="http://www.dijiuzhanzhang.com"><img height="208" width="147" alt="汪星人来袭 你准备了吗" src="images/tk6-6.jpg" rel="images/photo/tk6.jpg"></a>
					<div class="mask" style="width:147px;height:208px;display:blcok;"></div>
				</div>
				<div class="img">
					<a href="http://www.dijiuzhanzhang.com"><img height="208" width="147" alt="穿针器:懒人刺绣有保证" src="images/tk7-7.jpg" rel="images/photo/tk7.jpg"></a>
					<div class="mask" style="width:147px;height:208px;display:block;"></div>
				</div>
				<div class="img">
					<a href="http://www.dijiuzhanzhang.com"><img height="208" width="147" alt="可爱的圣诞铃铛教你折一个" src="images/tk8-8.jpg" rel="images/photo/tk8.jpg"></a>
					<div class="mask" style="width:147px;height:208px;display:block;"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="clear"></div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片拖动 图片放大镜 图片叠加 图片翻转旋转 图片延迟加载 图片淡出淡进 图片全屏 图片头像上传 二维码 滚动切换 滑动选项卡切换 图片广告 图片放大缩小 html5图片动画 带缩略图的幻灯片 地图 flash焦点图 图片滚动 图片滑动 图片切换 图片收缩展开 旋转木马 图片轮播 自动滚动图片轮播 图标导航菜单 选项卡切换 滑动手风琴 背景切换 手风琴 图表 焦点图 幻灯片 图片轮播 图片 头像截图 带标题的焦点图 图片相册 图片切换 图片网格 图片九宫格 图片高亮

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到