日期:2012-5-2来源:GBin1.com
在线演示1
在线演示2
本地下载
大家在开发过程中往往需要有效的展示不同类别下的图片或者文字内容,这个过程中你可能需要使用不同的标签来过滤不同类别下的图片内容,或者提供给用户一个方便的方式来选择不同的列别。今天我们这里将使用jQuery插件 -
filtrify来快速精致的实现一个超酷的摩托车分类展示应用,大家可以看到使用filtrify来使用标签分类显示图片是多么的简单,而且使用isotype来生成动画展示特效,希望大家喜欢!
这个插件使用了很多伪类,例如:after和:before,如果你不熟悉它,可以看看这篇文章,希望对大家有帮助!
注意IE8需要指定!DOCTYPE来支持伪类:after和before中的"content“属性,同时如果你需要支持IE7,你可以考虑使用IE7.js。
HTML代码
在HTML代码中,我们使用HTML5的data属性来定义类别,如下:
<ul id="container">
<li data-tag="Ducati"><strong>Hypermotard 796 Silver</strong><img src="img/motor/Model-Page_2012_Hypermotard_796_298.jpg"><span>Ducati</span></lspan>
<li data-tag="Ducati"><strong>Hypermotard 796 Red</strong><img src="img/motor/HM-796_2001_R_[298x168].jpg"><span>Ducati</span></lspan>
<li data-tag="Ducati"><strong>Hypermotard 1100 Evo Red</strong><img src="img/motor/2012-Ducati-Hypermotard-1100EVO4-298.jpg"><span>Ducati</span></lspan>
<li data-tag="Ducati"><strong>Streetfighter 848</strong><img src="img/motor/Color_SF-848_R_NC_298x168.jpg"><span>Ducati</span></lspan>
<li data-tag="Ducati"><strong>Diavel Carbon</strong><img src="img/motor/Model-Page_2012_Hypermotard_796_298.jpg"><span>Ducati</span></lspan>
<li data-tag="BMW"><strong>BMW K1300S HP</strong><img src="img/motor/2012-BMW-K1300SHPb-298x168.jpg"><span>BMW</span></lspan>
<li data-tag="BMW"><strong>2012 BMW G650GS</strong><img src="img/motor/2012-BMW-G650GSd-298x168.jpg"><span>BMW</span></lspan>
<li data-tag="Beneli"><strong>Tre-K 1130 Amazonas</strong><img src="img/motor/2012-Benelli-TreK1130Amazonas1-298x168.jpg"><span>Beneli</span></lspan>
<li data-tag="KTM"><strong>2012 KTM 1190 RC8R</strong><img src="img/motor/2012-KTM-1190RC8R4-298x168.jpg"><span>KTM</span></lspan>
<li data-tag="KTM"><strong>012 KTM 990 Duke R</strong><img src="img/motor/2012-KTM-990DukeR4-298x168.jpg"><span>KTM</span></lspan>
<li data-tag="Bimota"><strong>DB10B Motard</strong><img src="img/motor/2012-Bimota-DB10BMotard1-298x168.jpg"><span>Bimota</span></lspan>
<li data-tag="Yamaha"><strong>DB10B Motard</strong><img src="img/motor/2012-Yamaha-YZFR1d-298x168.jpg"><span>Yamaha</span></lspan>
<li data-tag="Yamaha"><strong>VMAX / VMX17</strong><img src="img/motor/2012-Yamaha-VMAX-VMX17a-298x168.jpg"><span>Yamaha</span></lspan>
<li data-tag="Honda"><strong>Honda CBR1000RR</strong><img src="img/motor/2012-Honda-CBR1000RRe-298x168.jpg"><span>Honda</span></lspan>
<li data-tag="Suzuki"><strong>Hayabusa</strong><img src="img/motor/2012-Suzuki-Hayabusaa-298x168.jpg"><span>Suzuki</span></lspan>
<li data-tag="Suzuki"><strong>V-Strom 1000 SE</strong><img src="img/motor/2012-Suzuki-VStrom1000SE1-298.x168.jpg"><span>Suzuki</span></lspan>
<li data-tag="Kawasaki"><strong>Ninja ZX-14R</strong><img src="img/motor/2012-Kawasaki-NinjaZX14Ra-298x168.jpg"><span>Kawasaki</span></lspan>
<li data-tag="Harley Davidson"><strong>XL883N Iron 883</strong><img src="img/motor/2012-Harley-Davidson-XL883N-Iron883z-298x168.jpg"><span>Harley Davidson</span></lspan>
</ul>
CSS
这里我们使用filterify的缺省css,并且添加isotope的css样式定制,如果你没有使用过isotope,请查看这篇文章,样式代码如下:
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: top, left, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
Javascript代码
$(function() {
var container = $("#container");
container.isotope({
itemSelector : 'ul#container > li',
layoutMode : 'fitRows'
});
$.filtrify("container", "placeHolder", {
hide : false,
callback : function ( query, match, mismatch ) {
container.isotope({ filter : $(match) });
}
});
});
javascript代码非常简单,只需要在filtrify的callback方法中调用isotope即可。是不是非常简单。
希望大家喜欢这个超酷的内容过滤插件。如果你有任何问题和建议请给我们留言,谢谢!
来源:使用jQuery插件filtrify实现的超酷动态标签分类摩托车新款展示
分享到:
相关推荐
jQuery实现超酷真实阴影效果 jQuery插件realshadow实现超酷真实阴影效果.zip
php + jquery ui插件 + jquery pager插件 实现新闻的 标签分类 + 无刷新分页
使用jQuery插件FancyBox轻松实现弹窗视频,使用jQuery插件FancyBox轻松实现弹窗视频
jquery图片展示插件 jquery图片弹出框插件 jquery图片排序过滤 jquery图片放大 jquery图片滑动效果 jquery城市二级联动 jquery多值输入插件 jquery多级菜单导航 jquery大转盘game jquery实现网易邮箱首页插件 jquery...
jquery 插件,实现多种不同的滚屏操作,
jQuery超酷下拉插件 jQuery超酷下拉插件 jQuery超酷下拉插件 jQuery超酷下拉插件 jQuery超酷下拉插件 jQuery超酷下拉插件
自己封装的jquery插件@实现了简单的轮播图以及图片点击后的回调实现,自动播放等,
使用jQuery.form插件,实现完美的表单异步提交
Jquery实现关键字标签生成插件 在新建和编辑中均可使用
jQuery插件:可拖动的图片展示实例(效果超酷) jQuery插件:可拖动的图片展示实例(效果超酷)
利用jquery实现表格动态分页,前台用jquery实现。后台用java实现动态查询数据,分页。
主要介绍了HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果,详细分析了Quicksand插件的使用及图片浮动显示的实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
这是一款效果很酷的jquery图片预览插件。该插件当用户点击预览图片的时候,会弹出模态窗口,图片会放大并滑出图片说明文本。当点击关闭图片按钮后,图片缩小回到原来的位置。
jQuery-Validation-Engine-master 表单验证插件 简单好用,已经包含汉化
jquery+div实现同时滑动切换的图文展示特效插件下载.rar
jQueryPager(JQuery分页插件pagination实现Ajax分页) CSDN犀利助互群60168829
用jquery代码实现超酷的虚拟全场景展示效果.zip 用jquery代码实现超酷的虚拟全场景展示效果.zip 用jquery代码实现超酷的虚拟全场景展示效果.zip
例如,使用了新的jQuery内部Ajax API就可以实现下面的代码了: // Assign handlers immediately after making the request, // and remember the jxhr object for this request var jxhr = $.ajax({ url: "example....
jquery插件colResizable实现表格列可拖拽伸缩表格大小
淘宝天猫商品分类导航Jquery插件 淘宝天猫商品分类导航Jquery插件 淘宝天猫商品分类导航Jquery插件 淘宝天猫商品分类导航Jquery插件 淘宝天猫商品分类导航Jquery插件