最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

Quicksand超漂亮的菜单排序效果

来源:http://www.erdangjiade.com/ 沐浴春风 2015-04-22 08:19浏览(1526)

Quicksand能对页面上的元素进行重新排序及过滤,并且有很漂亮的洗牌过渡动画效果,可以放到你项目中提高用户体验。本文以实际项目应用来讲解Quicksand的使用。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

Quicksand超漂亮的菜单排序效果
分类:其它特效 > jQuery插件 难易:中级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

主菜单:

<div id="menus">
    <ul>
        <li id="all" class="cur">
            所有功能模块
        </li>
        <li id="app">
            应用程序
        </li>
        <li id="sys">
            系统管理
        </li>
    </ul>
</div>

对应的子菜单。注意:主菜单的li标签id对应子菜单的class

<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>
    <li id="id-4" class="sys">
        <img src="images/member.gif" width="80" height="60" alt="" />
        <strong>
            会员管理
        </strong>
    </li>
    <li id="id-5" class="app">
        <img src="images/sms.gif" width="80" height="60" alt="" />
        <strong>
            短信发送
        </strong>
    </li>
    <li id="id-6" class="app">
        <img src="images/mms.gif" width="80" height="60" alt="" />
        <strong>
            彩信发送
        </strong>
    </li>
    <li id="id-7" class="app">
        <img src="images/plan.gif" width="80" height="60" alt="" />
        <strong>
            任务定制
        </strong>
    </li>
    <li id="id-8" class="app">
        <img src="images/survey.gif" width="80" height="60" alt="" />
        <strong>
            短信投票
        </strong>
    </li>
    <li id="id-9" class="sys">
        <img src="images/worker.gif" width="80" height="60" alt="" />
        <strong>
            员工管理
        </strong>
    </li>
    <li id="id-10" class="util">
        <img src="images/visit.gif" width="80" height="60" alt="" />
        <strong>
            客户回访
        </strong>
    </li>
</ul>

jQuery

首先复制列表区#list的内容:

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

接着来实现选项卡风格,当点击导航时,给当前点击的项加上选中的样式,同时其他项移除选中状态的样式:

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

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

$(function() {
    var $data = $("#list").clone();
    $("#menus 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) {} -
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/66.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2