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的倍数的按钮时,则只显示对应的数字块。
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属性选取,否则动画会出现异常。
该插件的更多高级用法和注意事项请参考其官方网站。