Quicksand - 超酷图片分类jQuery特效插件

PetitQ 图片/图形 2018-11-14 1.74K 0 0

Quicksand 是一款效果非常炫酷的 jQuery 超酷图片分类插件。Quicksand 可以根据 html5 data-id 属性来进行图片分类，它提供了很多参数用于分类动画的控制，并且可以使用 CSS3 的缩放图片效果。

HTML 结构

Quicksand 会将一个列表项替换为另一个列表项。你需要做的就是提供两个列表。可以通过下面的几种方式来提供列表：

也想出现在这里？联系我们吧

可以使用普通的 HTML 列表，如一个无序列表

可以通过 AJAX 回调来添加一个列表

通过 javascript 来改变原来的列表（例如重新排列它们）

```
<ul id="source">
```
```
  <li data-id="iphone">iOS</li>
```
```
  <li data-id="android">Android</li>
```

  <li data-id="winmo">Windows Phone 7</li>

```
</ul>
```
```
 
```
```
<ul id="destination" class="hidden">
```
```
  <li data-id="macosx">Mac OS X</li>
```
```
  <li data-id="macos9">Mac OS 9</li>
```
```
  <li data-id="iphone">iOS</li>
```
```
</ul>
```

第一个列表 source 是用户可见的列表，第二个列表是用于替换的列表。你需要在列表项中使用 HTML5 data-id 属性来描述同类元素以将它们进行分类。两个相同的 data-id 表示它们是同一个分类的元素。

javascript

然后就可以通过下面的代码来调用 Quicksand。

$('#source').quicksand( $('#destination li') );

你可以为 Quicksand 添加回调函数：

$('#source').quicksand( $('#destination li'), function() {

```
  // callback code
```
```
});
```

关于 CSS 样式的一些建议

1、当你在为列表项和它们的内容添加样式的时候，使用 ID 选择符可能会导致一些奇怪的结果。Quicksand 通过克隆来模拟动画帧效果。由于可能两个元素会有同样的 ID 存在，所以应该避免使用 ID 选择符来编写样式

2、Quicksand 需要知道 body 和容器及列表项之间的 margin。如果这些元素有它们自己的 margins，请使用 px(像素)为单位，不要使用 ems。该插件目前不能理解 em 单位

可用参数

你可以通过下面的参数修改 Quicksand。调用参数的格式如下：

$('#source').quicksand( $('#destination li'), {

```
  name: value
```
```
});
```

或者

$('#source').quicksand( $('#destination li'), {

```
  name: value
```
```
}, function() {
```
```
  // callback code
```
```
});
```

参数名称	默认值	描述
adjustHeight	'auto'	调整容器的高度来适应所有的列表项。'auto'为在图片分类动画前或图片分类动画后自动调整。'dynamic'为动态调整。设置为 false 则保持容器的高度不变。
adjustWidth	'auto'	调整容器的宽度来适应所有的列表项。'auto'为在图片分类动画前或图片分类动画后自动调整。'dynamic'为动态调整。设置为 false 则保持容器的宽度不变。
attribute	'data-id'	该属性用于匹配集合中的列表项。你可以提供自定义函数来获取唯一的值。
duration	750	动画持续时间，单位毫秒。
easing	'swing'	动画的 Easing 效果。可以在这里查看更多的jquery easing 插件的选项。
enhancement	function() {}	如果你想集成一些视觉增强功能（例如：替换文本），可以指定一个函数来为列表项在图片分类动画时应用它们。
useScaling	false	是否使用 CSS3 缩放动画。如果你需要缩放图片的动画效果，需要添加这个插件。
retainExisting	true	默认情况下，Quicksand 是重用已经存在的 DOM 元素而不是替换它们（1.3 版本后已经更新）。设置该参数为 false 来强制在图片分类动画结束时替换和刷新它们。这个参数在大多数情况下是必须的。
maxWidth	0	隐藏所有 CSS 属性大于这个值的元素。设置为 0 关闭这个功能。
atomic	false	设置该参数为 true 会使 DOM 元素立刻交换。设置为 false 将会使图片分类动画有一些延时，但是如果你想在动画时修改 DOM 元素，建议设置为 false。

集成其它插件

当你在列表项上使用其它一些插件功能（例如 tooltips）时，请记住要使用回调函数来在新的复制元素上来使用它们。

$("#content").quicksand($("#data > li"),

```
  {
```
```
    duration: 1000,
```
```
  }, function() { // callback function
```
```
    $('#content a').tooltip();
```
```
  }
```
```
);
```

当你在项目中使用了一些视觉增强功能（例如：替换字体）时，要在图片分类动画时使用 enhancement 来刷新和应用这些效果。

$("#content").quicksand($("#data > li"),

```
  {
```
```
    duration: 1000,
```
```
    enhancement: function() {
```
```
      Cufon.refresh('#content span');
```
```
    }
```
```
  }
```
```
);
```

Quicksand - 超酷图片分类 jQuery 特效插件

已有 434 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

Quicksand - 超酷图片分类jQuery特效插件

HTML 结构

javascript

可用参数

集成其它插件

Quicksand - 超酷图片分类 jQuery 特效插件

相关文章

js和CSS3炫酷图片画廊插件

CSS3实现的可调节预览的阴影效果

互动3D房间商品展示幻灯片特效

发表回复取消回复

热销模板

图片/图形

HTML 结构

javascript

可用参数

集成其它插件

Quicksand - 超酷图片分类 jQuery 特效插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复