Quicksand 插件入门介绍

待我称王封你为后i 2022-06-07 01:10 163阅读 0赞

## 1.插件介绍 ##

JS的插件丰富多样，今天试用了一款叫做**Quicksand**的插件，发现其使用方法虽然简单，但展现出来的洗牌特效却让人眼前一亮。下面就简要介绍一下这个插件的使用方法。  
此插件的官网地址：[Quicksand][]（此插件依赖于JQuery，因此在使用该插件时，务必在其之前引入JQuery插件）

## 2.使用方法 ##

该插件的调用方法非常简洁，仅一句代码：

$('#source').quicksand( $('#destination li'),{params},function(){ callback...} );

基本的工作原理就是用一个列表的项**替换**另一个列表的项。  
**参数：**  
`$('#source')`是用JQuery选取的源对象（被替换的），其是一个列表元素（如`<ul>`)；  
`$('#destination li')`是用JQuery选取的目标对象（要新插入的的列表项），其是一组列表项元素（如`<li>`)；  
`{params}`是一系列可选的参数，省略时使用默认参数，主要包括：

{
        attribute:'data-id',   //用于列表项的关联属性,默认为data-id
        duration:750,          //动画的持续时间，单位为毫秒，默认为750
        easing:'swing',        //动画的缓冲方式，默认为swing
        adjustHeight:'auto',   //自动调整动画前后，列表项容器的高度，默认为auto，false表示关闭
        adjustWidth:'auto',    //自动调整动画前后，列表项容器的宽度，默认为auto，false表示关闭
        atomic:false,          //设置为true时则立刻交换元素，默认为false
        enhancement:function(){ },  //加强动画效果函数
        useScaling:false,      //是否使用CSS3的转换动画的比例，默认不使用
        retainExisting:true    //默认为true时，表示quicksand操作DOM元素时，只是回收再利用而不是替换掉他们，为false时，则quicksand用新的元素替换旧的。
    }

## 3.使用例子 ##

这个例子展示了简单的分类动画，列表总包含10个子项，分别对应数字1-10，分类按钮包含三项，分别为所有数字、2的倍数、3的倍数。当点击所有数字的按钮时，屏幕显示所有数字块。而当点击2的倍数或3的倍数的按钮时，则只显示对应的数字块。  
![这里写图片描述][SouthEast]  
HTML

<!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>演示</title>
            <style type="text/css"> .webbies li { display: block; margin: 10px; float: left; width:100px; height:100px; font-size:20px; color:white; font-weight:bold; } .webbies{ width:60%; } </style>
        </head>
        <body>
            <div class="demo">
              <p id="load-webbies">    //分类按钮
                <a id="all" class="button" href="#">所有数字</a>
                <a id="2B" class="button" href="#">2的倍数</a>
                <a id="3B" class="button" href="#">3的倍数</a>
              </p>
              <ul class="webbies">   //列表项
                <li data-id="1" style="background-color:green">1</li>
                <li class="2B" data-id="2" style="background-color:red">2</li>
                <li class="3B" data-id="3" style="background-color:yellow">3</li>
                <li class="2B" data-id="4" style="background-color:blue">4</li>
                <li data-id="5" style="background-color:black">5</li>
                <li class="2B 3B" data-id="6" style="background-color:gray">6</li>
                <li data-id="7" style="background-color:Cyan">7</li>
                <li class="2B" data-id="8" style="background-color:Gold">8</li>
                <li class="3B" data-id="9" style="background-color:Purple">9</li>
                <li class="2B" data-id="10" style="background-color:YellowGreen">10</li>
              </ul>
            </div>
            <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
            <script src="js/quicksand.js"></script>
            <script> var data=$(".webbies").clone(); //保存原始列表数据 $(function() { $('#load-webbies a.button').click(function(){ //每个分类按钮绑定点击事件 var id=$(this).attr("id"); //获取点击的分类按钮id if (id=="all"){ //判断id source=$(data).find("li"); //获取全部列表项 }else{ source=$(data).find("li."+id); //获取class符合要求的列表项 } $(".webbies").quicksand(source); //调用quicksand插件 }); }); </script>
        </body>
    </html>

**在使用该插件时，可以注意到每个列表项都添加的data-id属性，这是为了quicksand插件调用，必须添加。**  
**特别注意：在使用CSS添加列表或列表项样式时，务必不要使用其id属性选取，否则动画会出现异常。**  
该插件的更多高级用法和注意事项请参考其官方网站。

[Quicksand]: https://razorjack.net/quicksand/%20%E2%80%9C%E5%AE%98%E7%BD%91%E5%9C%B0%E5%9D%80%E2%80%9D
[SouthEast]: /images/20220607/18a6bc0fd3b34981aa397734a8a5c3b7.png