HTML5网页设计

图片效果

jQuery图片列表鼠标滑过图片放大效果

时间:2014-12-02 12:18来源:未知作者:user点击:
jQuery图片列表鼠标滑过图片放大效果,当鼠标放在图片列表任一张图片上,当前图片出现放大效果,鼠标移开后自动恢复。

jQuery图片列表鼠标滑过图片放大效果,当鼠标放在图片列表任一张图片上,当前图片出现放大效果,鼠标移开后自动恢复。


<!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>jQuery图片列表鼠标滑过图片放大效果 - ShejiCool.com</title>
<script id="jquery_183" type="text/javascript" class="library" src="http://www.shejicool.com/demo/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://www.baidu.com/s?wd=shejicool.com">
				<img style="width:100%" src="http://www.shejicool.com/images/demo/400_1.jpg">
				</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://www.baidu.com/s?wd=shejicool.com">
				<img style="width:100%" src="http://www.shejicool.com/images/demo/400_2.jpg">
				</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://www.baidu.com/s?wd=shejicool.com">
				<img style="width:100%" src="http://www.shejicool.com/images/demo/400_3.jpg">
				</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://www.baidu.com/s?wd=shejicool.com">
				<img style="width:100%" src="http://www.shejicool.com/images/demo/400_4.jpg">
				</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://www.baidu.com/s?wd=shejicool.com">
				<img style="width:100%" src="http://www.shejicool.com/images/demo/400_1.jpg">
				</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://www.baidu.com/s?wd=shejicool.com">
				<img style="width:100%" src="http://www.shejicool.com/images/demo/400_2.jpg">
				</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://www.baidu.com/s?wd=shejicool.com">
				<img style="width:100%" src="http://www.shejicool.com/images/demo/400_3.jpg">
				</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://www.baidu.com/s?wd=shejicool.com">
				<img style="width:100%" src="http://www.shejicool.com/images/demo/400_4.jpg">
				</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://www.baidu.com/s?wd=shejicool.com">
					<img style="width:100%" src="http://www.shejicool.com/images/demo/400_1.jpg">
				</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://www.baidu.com/s?wd=shejicool.com">
				<img style="width:100%" src="http://www.shejicool.com/images/demo/400_3.jpg">
				</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>
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐