以下是 jquery百度图片搜索效果特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery百度图片搜索效果</title>
<script id="jquery_183" type="text/javascript" class="library" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="main">
<div class="imgtag">
<div class="tag_item">
<a style="height:100%; width:100%" href="#">
<img style="width:100%" src="images/w_meinv.jpg?0129" />
</a>
<div class="taglist" style="width: 46px;">
<ul class="tags">
<li class="tag tag1"><a href="javascript:void(0)">美女</a></li>
<li class="tag tag2"><a href="javascript:void(0)">诱惑</a></li>
<li class="tag tag2"><a href="javascript:void(0)">写真</a></li>
<li class="tag tag2"><a href="javascript:void(0)">小清新</a></li>
</ul>
</div>
</div>
</div>
<div class="imgtag">
<div class="tag_item">
<a style="height:100%; width:100%" href="#">
<img style="width:100%" src="images/w_mengchong.jpg?0129" />
</a>
<div class="taglist" style="width: 46px;">
<ul class="tags">
<li class="tag tag1"><a href="javascript:void(0)">宠物</a></li>
<li class="tag tag2"><a href="javascript:void(0)">萌货</a></li>
<li class="tag tag2"><a href="javascript:void(0)">金毛</a></li>
<li class="tag tag2"><a href="javascript:void(0)">喵星人</a></li>
</ul>
</div>
</div>
</div>
<div class="imgtag">
<div class="tag_item">
<a style="height:100%; width:100%" href="#">
<img style="width:100%" src="images/w_lvyoufengjing.jpg?0129" />
</a>
<div class="taglist" style="width: 46px;">
<ul class="tags">
<li class="tag tag1"><a href="javascript:void(0)">旅游</a></li>
<li class="tag tag2"><a href="javascript:void(0)">九寨沟</a></li>
<li class="tag tag2"><a href="javascript:void(0)">美景</a></li>
<li class="tag tag2"><a href="javascript:void(0)">泰国</a></li>
</ul>
</div>
</div>
</div>
<div class="imgtag">
<div class="tag_item">
<a style="height:100%; width:100%" href="#">
<img style="width:100%" src="images/w_sheying.jpg?0129" />
</a>
<div class="taglist" style="width: 46px;">
<ul class="tags">
<li class="tag tag1"><a href="javascript:void(0)">旅游</a></li>
<li class="tag tag2"><a href="javascript:void(0)">九寨沟</a></li>
<li class="tag tag2"><a href="javascript:void(0)">美景</a></li>
<li class="tag tag2"><a href="javascript:void(0)">泰国</a></li>
</ul>
</div>
</div>
</div>
<div class="imgtag">
<div class="tag_item">
<a style="height:100%; width:100%" href="#">
<img style="width:100%" src="images/w_bizhi.jpg?0129" />
</a>
<div class="taglist" style="width: 46px;">
<ul class="tags">
<li class="tag tag1"><a href="javascript:void(0)">旅游</a></li>
<li class="tag tag2"><a href="javascript:void(0)">九寨沟</a></li>
<li class="tag tag2"><a href="javascript:void(0)">美景</a></li>
<li class="tag tag2"><a href="javascript:void(0)">泰国</a></li>
</ul>
</div>
</div>
</div>
<div class="imgtag">
<div class="tag_item">
<a style="height:100%; width:100%" href="#">
<img style="width:100%" src="images/w_yulemingxing.jpg?0129" />
</a>
<div class="taglist" style="width: 46px;">
<ul class="tags">
<li class="tag tag1"><a href="javascript:void(0)">旅游</a></li>
<li class="tag tag2"><a href="javascript:void(0)">九寨沟</a></li>
<li class="tag tag2"><a href="javascript:void(0)">美景</a></li>
<li class="tag tag2"><a href="javascript:void(0)">泰国</a></li>
</ul>
</div>
</div>
</div>
<div class="imgtag">
<div class="tag_item">
<a style="height:100%; width:100%" href="#">
<img style="width:100%" src="images/w_qiche.jpg?0129" />
</a>
<div class="taglist" style="width: 46px;">
<ul class="tags">
<li class="tag tag1"><a href="javascript:void(0)">旅游</a></li>
<li class="tag tag2"><a href="javascript:void(0)">九寨沟</a></li>
<li class="tag tag2"><a href="javascript:void(0)">美景</a></li>
<li class="tag tag2"><a href="javascript:void(0)">泰国</a></li>
</ul>
</div>
</div>
</div>
<div class="imgtag">
<div class="tag_item">
<a style="height:100%; width:100%" href="#">
<img style="width:100%" src="images/w_chuangyisheji.jpg?0129" />
</a>
<div class="taglist" style="width: 46px;">
<ul class="tags">
<li class="tag tag1"><a href="javascript:void(0)">旅游</a></li>
<li class="tag tag2"><a href="javascript:void(0)">九寨沟</a></li>
<li class="tag tag2"><a href="javascript:void(0)">美景</a></li>
<li class="tag tag2"><a href="javascript:void(0)">泰国</a></li>
</ul>
</div>
</div>
</div>
<div class="imgtag">
<div class="tag_item">
<a style="height:100%; width:100%" href="#">
<img style="width:100%" src="images/w_quweigaoxiao.jpg?0129" />
</a>
<div class="taglist" style="width: 46px;">
<ul class="tags">
<li class="tag tag1"><a href="javascript:void(0)">旅游</a></li>
<li class="tag tag2"><a href="javascript:void(0)">九寨沟</a></li>
<li class="tag tag2"><a href="javascript:void(0)">美景</a></li>
<li class="tag tag2"><a href="javascript:void(0)">泰国</a></li>
</ul>
</div>
</div>
</div>
<div class="imgtag">
<div class="tag_item">
<a style="height:100%; width:100%" href="#">
<img style="width:100%" src="images/w_dongmanyouxi.jpg?0129" />
</a>
<div class="taglist" style="width: 46px;">
<ul class="tags">
<li class="tag tag1"><a href="javascript:void(0)">旅游</a></li>
<li class="tag tag2"><a href="javascript:void(0)">九寨沟</a></li>
<li class="tag tag2"><a href="javascript:void(0)">美景</a></li>
<li class="tag tag2"><a href="javascript:void(0)">泰国</a></li>
</ul>
</div>
</div>
</div>
</div>
<style>
div, ul {
margin: 0;
padding: 0;
}
:visited {
outline-style: none;
}
img {
border: 0;
}
.main {
width: 720px;
margin: 30px auto;
height: 190px;
}
.imgtag {
float: left;
width: 144px;
height: 90px;
position: relative;
}
.tag_item {
width: 144px;
height: 90px;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
.curr {
z-index: 100;
box-shadow: 0 0 5px #000;
background: rgba(37, 37, 37, 0.65);
background: #666 9;
}
.curr img {
opacity: 1;
filter: alpha(opacity = 100);
}
.not_curr {
opacity: .5;
filter: alpha(opacity = 45);
}
.taglist {
height: 21px;
width: 46px;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
border-radius: 0 11px 11px 0;
background: rgba(37,37,37,0.5);
}
.taglist .tags {
display: block;
list-style: none;
color: #f7f7f7;
font-size: 12px;
height: 21px;
width: 300px;
}
.tag {
display: block;
float: left;
height: 21px;
line-height: 21px;
text-align: left;
line-height: 22px 9;
}
.tag a {
color: #f7f7f7;
text-decoration: none;
display: block;
padding: 0 3px;
}
.tag1 {
width: 65px;
}
.tag1 a {
padding: 0 10px 0 10px;
font-weight: bold;
}
.tag2 {
width: 42px;
text-align: center;
}
</style>
<script>
$(function () {
$(".tag_item").each(function (i, target) {
$(target).mouseenter(function (e) {
//stop current animation.
$(target).stop();
$(target).find(".taglist").stop(false, true);
$(target).parent().addClass("curr");
$(".tag_item").not($(target)).addClass("not_curr");
$(target).find(".taglist").animate({
width: "248px"
}, "normal");
$(target).animate({
width: "192px",
height: "141px",
top: "-20px",
left: "-24px"
}, "normal");
});
$(target).mouseleave(function (e) {
//stop current animation.
$(target).stop();
$(target).find(".taglist").stop(false, true);
$(target).parent().removeClass("curr");
$(".tag_item").not(target).removeClass("not_curr");
$(target).find(".taglist").animate({
width: "46px"
}, "normal");
$(target).animate({
width: "144px",
height: "90px",
top: "0",
left: "0"
}, "normal");
});
})
});
</script>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
