jquery仿QQ空间装扮预览图片的感应鼠标提示效果
2015-02-18 21:20:42 访问(4222) 赞(0) 踩(0)
-
<!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>
<title>jquery仿QQ空间装扮预览图片的感应鼠标提示效果</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="<%=strWebPhyPath%>/CodeThemes/2015/2/v336/css/slowx.css" type="text/css" rel="stylesheet" />
<script src="<%=jQuery%>" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function(){
$("#list>.item").hover(function(){
$(this).css('z-index','101').find(".goodHover").show().css('z-index','100');
},function(){
$(this).css('z-index','0').find(".goodHover").hide().css('z-index','0');
});
});
</script>
<%=VersionHideInfo%>
</head>
<body>
<div id="wrap clearfix">
<div class="good_list" id="list">
<div class="item">
<div class="good">
<div class="goodOp">
<img src="<%=strWebPhyPath%>/CodeThemes/2015/2/v336/images/1.gif" alt="" /></div>
</div>
<div class="goodHover">
<div class="goodHd">
<h2>
西班牙</h2>
<p>
点击图片预览装扮</p>
<div class="img">
<div class="goodOp">
<img src="<%=strWebPhyPath%>/CodeThemes/2015/2/v336/images/1.gif" alt="" /></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="good">
<div class="goodOp">
<img src="<%=strWebPhyPath%>/CodeThemes/2015/2/v336/images/2.gif" alt="" /></div>
</div>
<div class="goodHover">
<div class="goodHd">
<h2>
西班牙</h2>
<p>
点击图片预览装扮</p>
<div class="img">
<div class="goodOp">
<img src="<%=strWebPhyPath%>/CodeThemes/2015/2/v336/images/2.gif" alt="" /></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="good">
<div class="goodOp">
<img src="<%=strWebPhyPath%>/CodeThemes/2015/2/v336/images/3.gif" alt="" /></div>
</div>
<div class="goodHover">
<div class="goodHd">
<h2>
西班牙</h2>
<p>
点击图片预览装扮</p>
<div class="img">
<div class="goodOp">
<img src="<%=strWebPhyPath%>/CodeThemes/2015/2/v336/images/3.gif" alt="" /></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="good">
<div class="goodOp">
<img src="<%=strWebPhyPath%>/CodeThemes/2015/2/v336/images/4.gif" alt="" /></div>
</div>
<div class="goodHover">
<div class="goodHd">
<h2>
西班牙</h2>
<p>
点击图片预览装扮</p>
<div class="img">
<div class="goodOp">
<img src="<%=strWebPhyPath%>/CodeThemes/2015/2/v336/images/4.gif" alt="" /></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="good">
<div class="goodOp">
<img src="<%=strWebPhyPath%>/CodeThemes/2015/2/v336/images/5.gif" alt="" /></div>
</div>
<div class="goodHover">
<div class="goodHd">
<h2>
西班牙</h2>
<p>
点击图片预览装扮</p>
<div class="img">
<div class="goodOp">
<img src="<%=strWebPhyPath%>/CodeThemes/2015/2/v336/images/5.gif" alt="" /></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="good">
<div class="goodOp">
<img src="<%=strWebPhyPath%>/CodeThemes/2015/2/v336/images/6.gif" alt="" /></div>
</div>
<div class="goodHover">
<div class="goodHd">
<h2>
西班牙</h2>
<p>
点击图片预览装扮</p>
<div class="img">
<div class="goodOp">
<img src="<%=strWebPhyPath%>/CodeThemes/2015/2/v336/images/6.gif" alt="" /></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="good">
<div class="goodOp">
<img src="<%=strWebPhyPath%>/CodeThemes/2015/2/v336/images/7.gif" alt="" /></div>
</div>
<div class="goodHover">
<div class="goodHd">
<h2>
西班牙</h2>
<p>
点击图片预览装扮</p>
<div class="img">
<div class="goodOp">
<img src="<%=strWebPhyPath%>/CodeThemes/2015/2/v336/images/7.gif" alt="" /></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="good">
<div class="goodOp">
<img src="<%=strWebPhyPath%>/CodeThemes/2015/2/v336/images/8.gif" alt="" /></div>
</div>
<div class="goodHover">
<div class="goodHd">
<h2>
西班牙</h2>
<p>
点击图片预览装扮</p>
<div class="img">
<div class="goodOp">
<img src="<%=strWebPhyPath%>/CodeThemes/2015/2/v336/images/8.gif" alt="" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
-
* {
margin:0;
padding:0;
font-size:12px;
line-height:150%;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
#wrap {
width:900px;
margin:0 auto;
height:200px;
}
.good_list {
padding:50px 0 30px 13px;
width:870px;
background:#f8f8f8;
border:1px solid #eaeaea;
margin:50px auto 0 auto;
overflow:hidden;
height:400px;
}
.item {
float:left;
margin:13px 13px 0 0;
position:relative;
z-index:0;
width:200px;
height:120px;
}
.good {
padding:8px;
width:184px;
height:104px;
}
.goodOp {
padding:2px;
border:1px solid #a8a8a8;
width:180px;
height:100px;
background:#fff;
font-size:0;
}
.goodHover {
padding:0px;
position:absolute;
z-index:1;
top:-40px;
left:-4px;
width:210px;
height:204px;
display:none;
}
.goodHd {
background:url('../images/imgHover.png');
width:210px;
height:204px;
}
.goodHd h2 {
font-size:12px;
text-align:center;
padding-top:12px;
}
.goodHd p {
color:#9c9c9c;
text-align:center;
}
.goodHd .img {
padding-left:12px;
}
参考来源：http://www.lanrenzhijia.com/jquery/1102.html
上一条：
下一条：
版权声明：
如果本站的资源使用了您的作品，请联系我们，我们会及时的注明
本站所有的资源均为免费自由下载，目的是让大家学习和交流
由于收集过程中几经转载，所以很多作品的原作者不详
如果您不愿在本站展示，请联系我们，我们会及时删除
相关评论
发表评论