jQuery过滤器图片浏览特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery过滤器图片浏览特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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=utf-8" />
<title>jQuery过滤器图片浏览</title>
<link href="imags/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="images/jquery.1.4.2-min.js"></script>
</head>

<body>

<div class="headeline"></div>

<!--演示内容开始-->
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a,a:visited{color:#5e5e5e;text-decoration:none;}
a:hover{color:#4183C4;text-decoration:underline;}
.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}/* Hides from IE-mac */
*html .clearfix{height:1%;}
.clearfix{display:block;}/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}

body{font-family:"Arial";font-size:14px;line-height:1.5;background:#a9a970 url('images/background.png');}
.demo{width:720px;margin:0 auto;}
.title{font-size:30px;font-weight:bold;color:#161616;margin:2em 0 1em 0;text-shadow:0px 1px 0px #f3f5da;display:block;text-align:center;}
/* menu */
ul.menu{margin-left:.5em;margin-bottom:1em;height:30px;}
ul.menu li{float:left;font-weight:bold;text-shadow:1px 1px 0px #f3f5da;padding:2px 15px;}
ul.menu li.selected{
	background:#acac75;
	-webkit-border-radius:15px;
	-moz-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:1px 1px 0px #8c8c5d;
}
ul.menu li.selected a{text-shadow:1px 1px 0px #8c8c60;color:#fff;}
/* item */
ul.item li{display:inline;float:left;margin:.5em;width:160px;height:160px;overflow:hidden;}
ul.item li img{
	border:5px solid #fff;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:0px 0px 5px #ac987e;
	-moz-box-shadow:0px 0px 5px #ac987e;
	box-shadow:0px 0px 5px #ac987e;
}
</style>


<script type="text/javascript">
$(document).ready(function(){
	
	$('.menu li a').click(function(){
		$('.menu li').removeClass('selected');
		$(this).parent('li').addClass('selected');
		thisItem 	= $(this).attr('rel');
		if(thisItem != "all"){
			$('.item li[rel='+thisItem+']').stop().animate({'width' : '160px', 'opacity' : 1, 'marginRight' : '.5em', 'marginLeft' : '.5em'});
			$('.item li[rel!='+thisItem+']').stop().animate({'width' : 0, 'opacity' : 0, 'marginRight' : 0, 'marginLeft' : 0});
		}else{
			$('.item li').stop().animate({'opacity' : 1, 'width' : '160px', 'marginRight' : '.5em', 'marginLeft' : '.5em'});
		}
	});
	
	$('.item li img').animate({'opacity' : 0.5}).hover(function(){
		$(this).animate({'opacity' : 1});
	},function(){
		$(this).animate({'opacity' : 0.5});
	});

});
</script>

<div class="demo">
		<span class="title">jQuery过滤器图片浏览</span>
		<ul class="menu">
			<li class="selected"><a href="javascript:void(0);" rel="all">演示一</a></li>
			<li><a href="javascript:void(0);" rel="jquery">演示二</a></li>
			<li><a href="javascript:void(0);" rel="css">演示三</a></li>
			<li><a href="javascript:void(0);" rel="js">演示四</a></li>
		</ul>
		
		<ul class="item clearfix">
			<li rel="jquery"><a href="#" target="_blank"><img width="150" height="150" src="images/1.jpg" /></a></li>
			<li rel="jquery"><a href="#" target="_blank"><img width="150" height="150" src="images/2.jpg" /></a></li>
			<li rel="css"><a href="#" target="_blank"><img width="150" height="150" src="images/3.jpg" /></a></li>
			<li rel="css"><a href="#" target="_blank"><img width="150" height="150" src="images/4.jpg" /></a></li>
			<li rel="js"><a href="#" target="_blank"><img width="150" height="150" src="images/5.jpg" /></a></li>
			<li rel="jquery"><a href="#" target="_blank"><img width="150" height="150" src="images/6.jpg" /></a></li>
			<li rel="css"><a href="#" target="_blank"><img width="150" height="150" src="images/7.jpg" /></a></li>
			<li rel="js"><a href="#" target="_blank"><img width="150" height="150" src="images/8.jpg" /></a></li>
		</ul>
	</div>

</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)