jQ实现百度图片搜索图片变大代码特效

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

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="charset" content="text/html; charset=utf-8"></meta>
<title>jQ实现百度图片搜索图片变大代码特效</title>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<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 type="text/javascript">
$(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>
</head>
<body>
	<div class="main">
		<div class="imgtag">
			<div class="tag_item">
				<a style="height:100%; width:100%" href="http://image.baidu.com/i?tn=list&word=liulan#%E7%BE%8E%E5%A5%B3|%E5%85%A8%E9%83%A8|0|1">
				<img style="width:100%" src="http://img.baidu.com/img/image/liulanimage/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="http://image.baidu.com/i?tn=list&word=liulan#%E5%AE%A0%E7%89%A9|%E5%85%A8%E9%83%A8|0|0">
				<img style="width:100%" src="http://img.baidu.com/img/image/liulanimage/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="http://image.baidu.com/i?tn=list&word=liulan#%E6%97%85%E6%B8%B8|%E5%85%A8%E9%83%A8|0|0">
				<img style="width:100%" src="http://img.baidu.com/img/image/liulanimage/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="http://image.baidu.com/i?tn=list&word=liulan#%E6%91%84%E5%BD%B1|%E5%85%A8%E9%83%A8|0|0">
				<img style="width:100%" src="http://img.baidu.com/img/image/liulanimage/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="http://image.baidu.com/i?tn=list&word=liulan#%E5%A3%81%E7%BA%B8|%E5%85%A8%E9%83%A8|0|1">
				<img style="width:100%" src="http://img.baidu.com/img/image/liulanimage/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="http://image.baidu.com/i?tn=list&word=liulan#%E6%98%8E%E6%98%9F|%E5%85%A8%E9%83%A8|0|0">
				<img style="width:100%" src="http://img.baidu.com/img/image/liulanimage/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="http://image.baidu.com/i?tn=list&word=liulan#%E6%B1%BD%E8%BD%A6|%E5%85%A8%E9%83%A8|0|0">
				<img style="width:100%" src="http://img.baidu.com/img/image/liulanimage/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="http://image.baidu.com/i?tn=list&word=liulan#%E8%AE%BE%E8%AE%A1|%E5%85%A8%E9%83%A8|0|0">
				<img style="width:100%" src="http://img.baidu.com/img/image/liulanimage/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="http://image.baidu.com/i?tn=list&word=liulan#%E6%90%9E%E7%AC%91|%E5%85%A8%E9%83%A8|0|0">
					<img style="width:100%" src="http://img.baidu.com/img/image/liulanimage/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="http://image.baidu.com/i?tn=list&word=liulan#%E5%8A%A8%E6%BC%AB|%E5%85%A8%E9%83%A8|0|0">
				<img style="width:100%" src="http://img.baidu.com/img/image/liulanimage/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>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

jQ实现百度图片搜索图片变大代码特效

分类

图片代码

描述

jQuery代码实现百度图片搜索图片变大特效，这里的图片引用自百度服务器的，用时候自己换下图片地址和文字就可以了。效果描述：把鼠标放在图片列表任一张图片上，可看图片变大了，好似响应你的呼唤，鼠标移开后自动恢复，CSS和JS代码并不...