jquery带过滤功能列表插件js代码

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

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

以下是 jquery带过滤功能列表插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/filters.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
</head>
<body>
	<div id="content">
		<div class="info">
			<h1>Filters</h1>
			<div id="carbonads-container"></div>
			<p>jquery带过滤功能列表插件</p>
		</div>
		
		<pre class="dd">
$('.filters').filters();
		</pre>
		
		<div class="filters demo1">
			<div class="filter">
				<a href="#" rel="city">City</a>
				<a href="#" rel="cars">Cars</a>
				<a href="#" rel="other">Other</a>
				<a href="#" rel="all">All</a>
			</div>
			<div class="container">
				<ul>
					<li class="cars">
						<a href="#"><img src="assets/img1.jpg" alt="" /></a>
					</li>
					<li class="city">
						<a href="#"><img src="assets/img6.jpg" alt="" /></a>
					</li>
					<li class="cars">
						<a href="#"><img src="assets/img5.jpg" alt="" /></a>
					</li>
					<li class="city">
						<a href="#"><img src="assets/img7.jpg" alt="" /></a>
					</li>
					<li class="cars">
						<a href="#"><img src="assets/img3.jpg" alt="" /></a>
					</li>
					<li class="cars">
						<a href="#"><img src="assets/img4.jpg" alt="" /></a>
					</li>
					<li class="city">
						<a href="#"><img src="assets/img8.jpg" alt="" /></a>
					</li>
					<li class="cars">
						<a href="#"><img src="assets/img2.jpg" alt="" /></a>
					</li>
					<li class="other">
						<a href="#"><img src="assets/img10.jpg" alt="" /></a>
					</li>
					<li class="city">
						<a href="#"><img src="assets/img12.jpg" alt="" /></a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

JS代码(init.js):

$(function(){
	$('.filters.demo1').filters();
	$('.filters.demo2').filters({
	css3:{
	init:false}
,move:{
	easing:'easeOutBack',duration:400}
,fade:{
	duration:[400,400]}
}
);
	$('.filters.demo3').filters({
	move:{
	init:false}
,css3:{
	init:false}
,fade:{
	opacity:[.1,1]}
}
);
	$('.filters.demo4').filters({
	css3:{
	transform:{
	scale:'0',rotate:'-90deg',skew:'45deg'}
}
}
);
}
);

CSS代码(default.css):

@import url(http://fonts.googleapis.com/css?family=Playball);/* ------ general-----------------------------------------------*/
html,body{padding:0;margin:0;height:100%;min-height:100%;}
body{background:url(bg.png) repeat;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#fff;}
.carbonad{border:none !important;background:none !important;}
#carbonads-container{top:70px;right:0;z-index:999;position:absolute;}
#content{margin:0 auto;width:1000px;}
.info{float:left;width:100%;margin:20px 0;padding-bottom:20px;border-bottom:1px solid #353535;color:#fff;position:relative;}
.info h1{font-family:'Playball',serif;font-size:77px;font-weight:normal;margin:0;margin-bottom:20px;}
.info p{float:left;margin:0;margin-bottom:6px;}
.info > p{width:600px;clear:both;}
.info .demo{position:absolute;top:45px;right:0;}
.info .demo a{display:inline-block;margin-left:10px;font-weight:bold;}
.dd{float:left;clear:both;width:960px;padding:20px;padding-bottom:10px;margin:0;margin-bottom:20px;background:#ddd;background:rgba(255,255,255,.8);color:#222;}
.footer{float:left;clear:both;width:100%;text-align:center;font-size:10px;text-transform:uppercase;padding:20px 0;margin-top:20px;border-top:1px solid #353535;}
/* ------ filtrey-----------------------------------------------*/
.filters{float:left;clear:both;width:1000px;}
.filters .filter{float:left;clear:both;width:960px;padding:20px;margin-bottom:20px;background:#545454;background:rgba(255,255,255,.1);}
.filters .filter a{float:left;display:block;padding:5px;margin-right:20px;font-size:11px;text-transform:uppercase;outline:none;}
.filters .filter .active{background:#eee;color:#111;}
.filters .container{float:left;clear:both;width:100%;position:relative;}
.filters .container ul,.filters .container ul li{display:block;list-style:none;padding:0;margin:0;}
.filters .container ul li{float:left;margin:0 8px 8px 0;font-size:0;line-height:0;}
.filters .container a{display:block;float:left;width:192px;height:192px;}
a{color:#eee;text-decoration:none;}

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