html5图片分类过滤特效插件

这是一款使用html5和jQuery制作的非常实用的图片分类过滤特效插件。该插件使用html5的data-tags属性将图片进行分类，然后用jquery来实现动态图片过滤功能。

这款插件中还集成了另一个jQuery插件-Quicksand 。它用于比较两个列表的列表项，然后在它们当中找到匹配的列表项，并将它们移动到新的位置上。

在线演示：http://www.htmleaf.com/Demo/201501151194.html

下载地址：http://www.htmleaf.com/html5/html5donghua/201501151193.html

时间： 2024-08-29 15:47:36

html5图片分类过滤特效插件的相关文章

【图片轮播特效插件】--- 效果实现

忙了一段时间,终于能好好静下来写这篇博文了,那废话就不多说,直接开始吧. 按照上一篇对于jQuery插件的学习掌握,首先就是搭好一个合适的框架,定好插件中需要用到的属性,给其他使用者留出使用接口: 1 (function($){ 2 //各种默认的属性参数 3 var defaults = { 4 width: 400, 5 height: 200, 6 direction:'left', 7 imgs:[{ 8 src:'p0.jpg', 9 link:'http://www.cnblogs.

黄聪：手机移动端建站Jquery+CSS3+HTML5触屏滑动特效插件、实现触屏焦点图、图片轮展图

前言 TouchSlide 可以说是 SuperSlide 手机简化版,不同的地方在于:1.TouchSlide是纯javascript开发的,不依赖任何js库,鉴于此,TouchSlide调用方法和SuperSlide有点不同.调用方法为:TouchSlide({slideCell:"#slider",effect:"leftLoop"});(slideCell必须为id对象);同样效果,SuperSlide调用方法为:jQuery("#slider&q

【图片轮播特效插件】--- 自学入门

接触jQuery很久了,深深的被其强大的选择器和众多的插件特效所折服,而在实际的项目中为了项目进度,常常都是从网上搜索各种急需的插件. 突然有一天,静静的坐下来,沉淀知识时总是没有太多的惊喜.尤其是提到插件的使用,总是一味的照搬照抄必然得不到成长.避开项目业务中可能会遇到复杂繁琐的项目功能不说,许多简单的功能完全可以自己封装成一个插件,毕竟自己动手产生的乐趣才最有意义. 对于这次jQuery插件的编写,我打算用三篇随笔来完成,尽量总结到方方面面,还希望各位多多拍砖(各位拍砖也是我学习的动力^_^

HTML5 canvas生成图片马赛克特效插件

这是一款使用HTML5 canvas来将图片制作成马赛克效果的js插件.该马赛克插件可以使用canvas生成各种形状的像素马赛克,并将图片按照其颜色深度用不同颜色的马赛克进行渲染,效果十分逼真. 该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个js插件来制作了一个完整的图片马赛克应用框架:The Pixelator. 这个马赛克效果js插件需要使用同源的图片,根据 HTML5 规范,浏览器在解析getImageData()方法时会阻止获取跨浏览器的图片. 在线演示:http

基于HTML5/CSS3图片网格动画特效

现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱.今天要分享的这款HTML5图片网格动画特效就非常炫酷.图片缩略图按网格的布局一行行排列,你只需点击按钮即可让这些图片出现不可思议的动画效果,值得一看.效果图如下: 在线预览源码下载实现的代码: <div class="grid"> </div> <span class="animate">开始动画</span> &l

css3简单实现图片模糊过滤效果

<!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="Cont

CSS3实战开发: 纯CSS实现图片过滤分类显示特效

各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运行效果: 从上面的运行效果,大家不难发现,当我点击某一菜单时,导航区域会相应高亮显示此分类的图标,而其他图标则会变暗. 很多人可能会说,这个这么简单,直接使用javascript或jQuery等前端框架,再配合一些CSS,就可以很快实现同样的效果了.如果你是这一部分人,我也希望你停下脚步,看看这篇教程.因为在今天这篇教程中,我会用另一个思维方式来思考问题,我

html5 canvas实现图片玻璃碎片特效

今天要为大家带来一款html5 canvas实现的图片玻璃碎片特效.图片以玻璃碎片的形式出现到界面中,然后似玻璃被打碎的效果渐消息.效果图如下: 在线预览源码下载实现代码: html代码: <img src="city_copy.jpg" id="src_img" class="hidden"> <div id="container" style="-webkit-perspective:

基于HTML5 Canvas实现的图片马赛克模糊特效

效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素把图像转换成像素形式,这基本上是一个为canvas imageData功能的简单演示. 此脚本现存于GitHub上,您可以在那里下载到脚本和示例.在GitHub上查看像素化资源二.选项此方法接受一个对象数组,每个对象都拥有一组选项.resolution : 渲染像素间的像素距离,必须的.shape