<!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=gb2312 " />
<title>CSS+jQuery实现的鼠标滑过图片周围图片变暗的效果丨芯晴网页特效丨CsrCode.Cn</title>
<style>
body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,hr,pre,form,fieldset,input,p,blockquote,th,td,br,img {margin: 0; padding: 0;}
ol,ul,li {list-style-type:none;}
img {border: 0; display:block;}
table { border-collapse:collapse;}
h1, h2, h3, h4, h5, h6 {font-weight: 700;}
h1 {font-size:20px; line-height:28px;}
h2 {font-size:18px; line-height:24px;}
h3 {font-size:16px; line-height:18px;}
h4 {font-size:14px;}
h5 {font-size:12px; line-height:16px;}
h6 {font-size:12px; line-height:16px; font-weight: 400;}
hr{ height:1px; border:none; border-bottom:1px dashed #ddd;}
a:link,a:visited{ color:# 666; text-decoration:none;}
a:hover{ color:# 679100; text-decoration:underline;}
.globalWidth{ width:980px; margin:0px auto;}
.colord{ color:#ddd;}
.color6{ color:# 666;}
#Wapper{ width:980px; margin:0px auto; margin-top:10px;}
/* album */
.albumIndex{ position:relative; height:315px;}
.albumIndex_1{ position:absolute; left:0px; top:0px;}
.albumIndex_2{ position:absolute; left:0px; top:143px;}
.albumIndex_3{ position:absolute; left:233px; top:0x;}
.albumIndex_4{ position:absolute; left:444px; top:0x;}
.albumIndex_5{ position:absolute; left:444px; top:143px;}
.albumIndex_6{ position:absolute; left:601px; top:143px;}
.albumIndex_7{ position:absolute; right:0px; top:0px;}
.albumIndex_8{ position:absolute; right:0px; bottom:0px;}
.albumIndex .albumTitle{ width: 100%; position:absolute; bottom:0px; background:#fff; z-index: 999999; display:none;}
.mask { position: absolute; background: # 000; opacity: 0; filter: alpha(opacity= 0); left: 0; top: 0; width:221px;}
.maskblack { position: absolute; background: # 000; opacity: 0; filter: alpha(opacity= 0); left: 0; top: 0; width:221px;}
.albumIndex #m1{ width:232px; height:142px; }
.albumIndex #m2{ width:232px; height:172px; }
.albumIndex #m3{ width:211px; height:315px; }
.albumIndex #m4{ width:314px; height:142px; }
.albumIndex #m5{ width:156px; height:172px; }
.albumIndex #m6{ width:157px; height:172px; }
.albumIndex #m7{ width:221px; height:172px; }
.albumIndex #m8{ width:221px; height:142px; }
</style>
<script src= " /images/jquery-1.6.2.min.js " type= " text/jscript "></script>
<script type= " text/jscript ">
$(function(){
$( " .albumIndex .posdiv ").each(function() {
$( this).hover(function() {
$( this).siblings().find( " .mask ").stop();
$( this).find( " .albumTitle ").stop();
$( this).siblings().find( " .mask ").fadeTo( " fast ", 0.3);
$( this).find( " .albumTitle ").fadeTo( " fast ", 0.7);
},
function() {
$( this).siblings().find( " .mask ").stop();
$( this).siblings().find( " .mask ").fadeTo( " fast ", 0);
$( this).find( " .albumTitle ").hide();
});
});
})
</script>
</head>
<body>
<div id= " Wapper ">
<div class= " albumIndex ">
<div class= " albumIndex_1 posdiv ">
<a href= " # "><img src= " http://www.csrcode.cn/images/m01.jpg " width= " 232 " height= " 142 " /><div class= " mask " id= " m1 "> </div></a>
<div class= " albumTitle ">
<p>asdfasdfasdf</p>
<p><a href= " # ">查看详细</a></p>
</div>
</div>
<div class= " albumIndex_2 posdiv ">
<a href= " # "><img src= " http://www.csrcode.cn/images/m02.jpg " width= " 232 " height= " 172 " /><div class= " mask " id= " m2 "> </div></a>
<div class= " albumTitle ">
<p>asdfasdfasdf</p>
<p><a href= " # ">查看详细</a></p>
</div>
</div>
<div class= " albumIndex_3 posdiv ">
<a href= " # "><img src= " http://www.csrcode.cn/images/m03.jpg " width= " 211 " height= " 315 " /><div class= " mask " id= " m3 "> </div></a>
<div class= " albumTitle ">
<p>asdfasdfasdf</p>
<p><a href= " # ">查看详细</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
<br>第一次运行本代码，请刷新一下本页面先~~<br>所需js文件：<a href= " http://www.csrcode.cn/images/jquery-1.6.2.min.js ">jquery- 1.6. 2.min.js</a><hr><p align= " center "><font color=black>本特效由 <a href= " http://www.CsrCode.cn " target= " _blank ">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
<html xmlns= " http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= " Content-Type " content= " text/html; charset=gb2312 " />
<title>CSS+jQuery实现的鼠标滑过图片周围图片变暗的效果丨芯晴网页特效丨CsrCode.Cn</title>
<style>
body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,hr,pre,form,fieldset,input,p,blockquote,th,td,br,img {margin: 0; padding: 0;}
ol,ul,li {list-style-type:none;}
img {border: 0; display:block;}
table { border-collapse:collapse;}
h1, h2, h3, h4, h5, h6 {font-weight: 700;}
h1 {font-size:20px; line-height:28px;}
h2 {font-size:18px; line-height:24px;}
h3 {font-size:16px; line-height:18px;}
h4 {font-size:14px;}
h5 {font-size:12px; line-height:16px;}
h6 {font-size:12px; line-height:16px; font-weight: 400;}
hr{ height:1px; border:none; border-bottom:1px dashed #ddd;}
a:link,a:visited{ color:# 666; text-decoration:none;}
a:hover{ color:# 679100; text-decoration:underline;}
.globalWidth{ width:980px; margin:0px auto;}
.colord{ color:#ddd;}
.color6{ color:# 666;}
#Wapper{ width:980px; margin:0px auto; margin-top:10px;}
/* album */
.albumIndex{ position:relative; height:315px;}
.albumIndex_1{ position:absolute; left:0px; top:0px;}
.albumIndex_2{ position:absolute; left:0px; top:143px;}
.albumIndex_3{ position:absolute; left:233px; top:0x;}
.albumIndex_4{ position:absolute; left:444px; top:0x;}
.albumIndex_5{ position:absolute; left:444px; top:143px;}
.albumIndex_6{ position:absolute; left:601px; top:143px;}
.albumIndex_7{ position:absolute; right:0px; top:0px;}
.albumIndex_8{ position:absolute; right:0px; bottom:0px;}
.albumIndex .albumTitle{ width: 100%; position:absolute; bottom:0px; background:#fff; z-index: 999999; display:none;}
.mask { position: absolute; background: # 000; opacity: 0; filter: alpha(opacity= 0); left: 0; top: 0; width:221px;}
.maskblack { position: absolute; background: # 000; opacity: 0; filter: alpha(opacity= 0); left: 0; top: 0; width:221px;}
.albumIndex #m1{ width:232px; height:142px; }
.albumIndex #m2{ width:232px; height:172px; }
.albumIndex #m3{ width:211px; height:315px; }
.albumIndex #m4{ width:314px; height:142px; }
.albumIndex #m5{ width:156px; height:172px; }
.albumIndex #m6{ width:157px; height:172px; }
.albumIndex #m7{ width:221px; height:172px; }
.albumIndex #m8{ width:221px; height:142px; }
</style>
<script src= " /images/jquery-1.6.2.min.js " type= " text/jscript "></script>
<script type= " text/jscript ">
$(function(){
$( " .albumIndex .posdiv ").each(function() {
$( this).hover(function() {
$( this).siblings().find( " .mask ").stop();
$( this).find( " .albumTitle ").stop();
$( this).siblings().find( " .mask ").fadeTo( " fast ", 0.3);
$( this).find( " .albumTitle ").fadeTo( " fast ", 0.7);
},
function() {
$( this).siblings().find( " .mask ").stop();
$( this).siblings().find( " .mask ").fadeTo( " fast ", 0);
$( this).find( " .albumTitle ").hide();
});
});
})
</script>
</head>
<body>
<div id= " Wapper ">
<div class= " albumIndex ">
<div class= " albumIndex_1 posdiv ">
<a href= " # "><img src= " http://www.csrcode.cn/images/m01.jpg " width= " 232 " height= " 142 " /><div class= " mask " id= " m1 "> </div></a>
<div class= " albumTitle ">
<p>asdfasdfasdf</p>
<p><a href= " # ">查看详细</a></p>
</div>
</div>
<div class= " albumIndex_2 posdiv ">
<a href= " # "><img src= " http://www.csrcode.cn/images/m02.jpg " width= " 232 " height= " 172 " /><div class= " mask " id= " m2 "> </div></a>
<div class= " albumTitle ">
<p>asdfasdfasdf</p>
<p><a href= " # ">查看详细</a></p>
</div>
</div>
<div class= " albumIndex_3 posdiv ">
<a href= " # "><img src= " http://www.csrcode.cn/images/m03.jpg " width= " 211 " height= " 315 " /><div class= " mask " id= " m3 "> </div></a>
<div class= " albumTitle ">
<p>asdfasdfasdf</p>
<p><a href= " # ">查看详细</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
<br>第一次运行本代码，请刷新一下本页面先~~<br>所需js文件：<a href= " http://www.csrcode.cn/images/jquery-1.6.2.min.js ">jquery- 1.6. 2.min.js</a><hr><p align= " center "><font color=black>本特效由 <a href= " http://www.CsrCode.cn " target= " _blank ">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
