JQuery插件Quicksand实现超炫的动画洗牌效果

2024-10-05 17:34:21

Quicksand是一款基于jQuery的插件，能对页面上的元素进行重新排序及过滤，并且有非常不错的洗牌过渡动画效果，可以应用在很多项目中来增强用户体验。本文以实际项目应用来讲解Quicksand的使用。

XHTML

<div id="nav">
  <ul>
   <li id="all" class="cur">所有功能模块</li>
   <li id="app">应用程序</li>
   <li id="sys">系统管理</li>
  </ul>
</div>
<ul id="list" class="image-grid">
  <li id="id-1" class="app">
   <img src="images/birth.gif" width="80" height="60" alt="" />
   <strong>生日祝福</strong></li>
  <li id="id-2" class="app">
   <img src="images/festival.gif" width="80" height="60" alt="" />
   <strong>节日祝福</strong></li>
  <li id="id-3" class="sys">
   <img src="images/jifen.gif" width="80" height="60" alt="" />
   <strong>积分管理</strong></li>
  ....N多li
</ul>

XHTML结构由一个导航条和一个内容列表组成。在内容列表#list里，我给每个li都加了一个id属性，这个是为了方便Quicksand插件调用。

CSS

#nav{height:36px; margin:10px auto; border-bottom:1px solid #36c}
#nav ul{list-style:none; padding-left:120px}
#nav ul li{float:left; height:34px; line-height:34px; margin-left:6px;
padding:0px 12px; border-left:1px solid #d3d3d3; border-right:1px solid #d3d3d3;
 border-top:1px solid #d3d3d3; background:#f7f7f7; cursor:pointer}
#nav ul li.cur{height:35px; background:#36c; color:#fff}
.image-grid{zoom:1}
.image-grid li{width: 82px; height:100px; margin: 20px 0 0 35px; float:left;
 text-align: center; line-height:18px;color: #686f74;overflow:hidden;}
.image-grid li img,.image-grid li strong{display:block;}

我给导航条#nav设置了选项卡风格，并设置选中状态#nav ul li.cur的样式。列表内容区也设置了每张图片的固定高度和宽度。

jQuery

首先，复制列表区的内容:

var $data=$("#list").clone();

然后，来实现选项卡风格，当点击导航时，给当前点击的项加上选中的样式，同时其他项移除选中状态的样式：

$("#nav ul li").click(function(){
  $(this).addClass("cur");
  $(this).siblings().removeClass("cur");
});

接着，继续在单击时间里，获取当前点击选项的ID，通过判断ID值，获取数据源$source，最后调用quicksand插件。完整的代码如下：

$("#nav ul li").click(function(){
  $(this).addClass("cur");
  $(this).siblings().removeClass("cur");
  var id = $(this).attr("id");
    if(id=="all"){
      var $source=$data.find("li");
    }else{
      var $source=$data.find("li[class="+id+"]");
    }
    $("#list").quicksand($source,{
      duration: 1000,
      attribute: 'id',
      easing: 'swing'
    });
  });
});

Quicksand插件提供了几个参数可配置：
duration：过渡动画的时间，以毫秒为单位。
attribute：关联数据的属性，本例设置为id。
easing：动画缓冲方式。

还有一个方法enhancement：function(c) {}可以自定义函数调用。

顺便提一下，IE6下没有过渡动画效果，IE7+，以及其他高级浏览器均测试通过。

以上所述就是本文的全部内容了，希望大家能够喜欢。

HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)

本文讲述了HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果.分享给大家供大家参考,具体如下: 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我们将使用HTML5和jQuery插件Quicksand来创建一个超酷的星际争霸兵种效果图.希望大家喜欢! 先来看看效果图: HTML5代码首先我们使用HTML5的代码来创建一个html文档,将所需的quicksand类库,及其jquery类库,还有HTML5类库倒入,如下: <!DOCTYPE h
基于Jquery插件开发之图片放大镜效果(仿淘宝)

需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大! 思索:为了考虑开发速度,最先考虑的是想使用网络上的现成代码!但是大致搜索了一下,网上可用的代码并不多,而且部分效果并不理想!而且有些代码,估计阅读下来比自己写一个成本还要高,于是产生了自己写一个jquery的插件的想法! 原理:最起考虑的原理是,两张图片,一张小图,一张大图,先获取鼠标在小图上面的坐标,然后以一个div来显示大图,并根据小图的坐标乘以大图除以小图得到的倍数定位!开始是把大图设为平铺不重复北景,然后使用背景的p
跟我一起学写jQuery插件开发方法（附完整实例及下载）

很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效果发愁的时候,你潇洒的过去,然后对她说:"嗨,美女,用这个吧.这是我写的一个jQuery插件."我想基本上你的人生大事就能很快解决. 先想好做个什么功能这是第一步,也是很重要的一步,鉴于咱们都是刚学习写jQuery插件,所以,这个功能一定要简单一些.不要想一口就吃个胖子,咱也吃不了.咱还
分享2个jQuery插件--jquery.fileupload与artdialog

这些是我们项目中必不可少的东西,所以今天推荐两个一个叫做artdialog是个iframe的jquery插件,一个叫jquery file upload,我看网上很少有这个插件jquery file upload的插件使用教程,今天我就简单的介绍和写一点使用的方法! 简单用代码举例子最小化的方法复制代码代码如下: data-url是上传后执行上传文件的php方法 <input id="fileupload" type="file" name="
jQuery插件原来如此简单 jQuery插件的机制及实战

jQuery插件的种类 1.封装对象方法这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件.此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery的方法,都是在jQuery脚本库内部通过这种形式"插"在内核上的,例如parent()方法,appendTo()方法等. 2.封装全局函数可以将独立的函数加到jQuery命名空间下.如常用的jQuery.ajax()方法.去首尾空格的jQuery.trim()方法,都是jQ
jquery.lazyload 实现图片延迟加载jquery插件

什么是ImageLazyLoad技术在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升. 怎么实现ImageLazyLoad 一.使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compil
Jquery插件之多图片异步上传

1.初始化上传控件数量. 复制代码代码如下: $(document).ready(function() { $('#H_File').uploadFile({ key: 'test',count:3 }); }); 以前的设计思想是,初始化上传控件数量,页面显示为1个上传控件,每当上传成功后,在下面创建一个上传控件. 2.上传图片成功后这就是最终的效果,如果您有更好的插件,希望一起开源. 其他的就不多说了,如果您感兴趣,点击下载源码 /201010/yuanma/jquery_aspnet_
强烈推荐240多个jQuery插件提供下载

jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents.events.实现动画效果,并且方便地为网站提供 AJAX 交互. jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择. jQuery 能够使用户的 html 页保持代码和 html 内容分离,也就是说,不用再在 html 里面插入一堆js来调用命令了,只需定义 id 即可.今天在Kollermedia.at上发现了一篇J
jquery插件lazyload.js延迟加载图片的使用方法

如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度. Lazy Load 插件原理修改目标img元素的src属性为orginal属性,从而中断图片的加载.检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果.代
JQuery插件Quicksand实现超炫的动画洗牌效果

Quicksand是一款基于jQuery的插件,能对页面上的元素进行重新排序及过滤,并且有非常不错的洗牌过渡动画效果,可以应用在很多项目中来增强用户体验.本文以实际项目应用来讲解Quicksand的使用. XHTML <div id="nav"> <ul> <li id="all" class="cur">所有功能模块</li> <li id="app">应用程序&l
一款基jquery超炫的动画导航菜单可响应单击事件

今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 源码下载 html代码: <ul> <li><a href="http://www.w2bc.com">First</a></li> <li><a href="http://www.w2bc.com"&g
基于canvas实现超炫酷的流水灯效果

本文实例为大家分享了基于canvas实现超炫酷的流水灯效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基于canvas超炫酷的流水灯效果</title> <style> *{ margin: 0; padding: 0; } canvas{ border: 1px solid red; wi
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】

本文实例讲述了jQuery插件FusionCharts实现的3D帕累托图效果.分享给大家供大家参考,具体如下: 1.设计3D帕累托图的页面 index.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equi
jQuery实现带有洗牌效果的动画分页实例

本文实例讲述了jQuery实现带有洗牌效果的动画分页.分享给大家供大家参考.具体如下: 这款jquery分页示例载入的是一个图片的LI列表,使用jQuery技术将其分为多页显示,在分页的过程中,还加入了动画效果,使整个分页效果看上去很有专业味. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-list-page-flash-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts实现的2D回归直线散点效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts之2D回归直线的散点</title> <script type="text/javascript" src="js
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts绘制2D带Label的折线图效果.分享给大家供大家参考,具体如下: 1.示例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D带Label的折线图</title> <script type="text/javascript" src=&q
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】

本文实例讲述了jQuery插件FusionCharts绘制的2D帕累托图效果.分享给大家供大家参考,具体如下: 1.了解帕累托图的特性以及和其他图的共性 2.设计帕累托图页面中引入图的类型以及怎么引入到页面 index.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html&g
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts实现的2D堆条状图效果.分享给大家供大家参考,具体如下: 1.HighCharts之2D堆条状图源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D堆条状图</title> <script type="text/javascript" src

JQuery插件Quicksand实现超炫的动画洗牌效果

相关推荐

随机推荐