jquery图片九宫格样式特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery图片九宫格样式特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片九宫格样式 </title>
<link href="css/zzsc.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<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>
</head>
<body>
<div class="image_show clearfix">
<div class="user_tabs">
<div class="tabs_panes">
<div style="display:block" class="tabs_con">
<div class="img" id="bigImg"> <a href="#"><img height="382" width="304" alt="女人微单" src="images/photo/tk6.jpg"></a>
<div class="img_mask"></div>
<p><a href="#">汪星人来袭 你准备了吗</a></p>
</div>
</div>
</div>
<div id="smallImg">
<div class="col_left">
<div class="img"> <a href="#"><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="#"><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="#"><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: block;"></div>
</div>
</div>
<div class="col_right">
<div class="r_top">
<div class="img"> <a href="#"><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="#"><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="#"><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: none;"></div>
</div>
<div class="img"> <a href="#"><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="#"><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>
</div>
</body>
</html>

CSS代码(zzsc.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,abbr,acronym,address,cite,code,del,dfn,em,img,ins,strike,strong,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,object,table,col,colgroup,caption,summary,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-size:12px;background:transparent;}
input,button{margin:0;padding:0;}
body{color:#333;font-size:12px;font-family:"����",Verdana,Arial,Helvetica,sans-serif;}
h1,h2,h3,h4,h5,h6,p,ul,ol,dl,em{text-align:center;color:#333;font-style:normal;font-family:"����",Verdana,Arial,Helvetica,sans-serif;}
h1,h2,h3,h4,h5,h6{font-size:14px;font-weight:700;}
ol,ul,li{list-style:none;}
button,input[type="submit"]{cursor:pointer;}
*+html img{margin-bottom:0!important;}
/* Fix IE7 */
textarea{margin:0;padding:0;font-size:14px;overflow:auto;}
:focus{outline:0;}
/* remember to highlight inserts somehow! */
ins{text-decoration:none;}
del{text-decoration:line-through;}
abbr{cursor:help;border-bottom:1px dotted #999;}
acronym{cursor:help;border-bottom:1px dotted #999;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:collapse;border-spacing:0;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';}
/* ------------------------------------------------------------------------ Links------------------------------------------------------------------------- */
a:link,a:visited{color:#333;text-decoration:none;}
a:hover{color:#d1130e;text-decoration:underline;}
a:active{color:#000;}
/* ------------------------------------------------------------------------ Hacks------------------------------------------------------------------------- */
/* ----- clear fix for floats ----- */
/* these styles instruct non-IE browsers to render container elements so that they fully enclose floats */
/* without this class applied,a float might hang over the bottom border of it's container */
.clearfix:after{content:"\0020";width:0;height:0;line-height:0;font-size:0;display:block;clear:both;visibility:hidden;overflow:hidden;}
.clearfix{display:inline-block;*zoom:1;}
/* Hides from IE-mac \*/
.clearfix{display:block;}
.clear{height:0;clear:both;line-height:0;font-size:0;overflow:hidden;}
.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;}
.image_show .tabs_panes .img{position:relative;width:304px;height:382px;}
.image_show .tabs_panes .img .img_mask{position:absolute;left:0;top:340px;width:304px;height:42px;background:#000;opacity:0.6;filter:alpha(opacity=60);}
.image_show .tabs_panes .img p{position:absolute;left:0;top:340px;width:304px;height:42px;line-height:42px;font-size:16px;text-align:center;color:#fff;}
.image_show .tabs_panes .img p a,.image_show .tabs_panes .img p a:visited{color:#fff;}
.mask{position:absolute;left:0;top:0;background:#000;opacity:0.4;filter:alpha(opacity=40);}

附件:下载该文件资源,减少时间成本(增值服务)