欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > JavaScript >

Quicksand超炫的页面排序及过滤效果

发布时间:2015-08-11  编辑:杨雨个人博客网站   点击:   

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

Quicksand超炫的页面排序及过滤效果

HTML

<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+,以及其他高级浏览器均测试通过。


本文地址:http://itbyc.com/web/javascript/3173.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1