jQuery插件-Dylay,流布局我们前面介绍过很多,但这个流布局jQuery插件不同的是它的动画效果很不错,大家可以尝试使用下。另外《有用的jQuery布局插件推荐》这篇文章中有好几个不错流布局插件分享,大家可以看看。

Dylay jQuery插件使用方法

STEP1:调用外部文件

其中包含jquery.jseasing.js插件。(放至body以外的地方即可)

<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/dylay.js"></script>

STEP2:HTML代码

就是你的布局代码,格式参考如下:

<ul id="dylay">
<li style="width: 10%; height: 20px;" class="voyelle" data-foo="5">A</li>
<li style="width: 10%; height: 40px;" class="consonne" data-foo="6">B</li>
<li style="width: 10%; height: 40px;" class="consonne" data-foo="3">C</li>
<li style="width: 10%; height: 20px;" class="consonne" data-foo="2">D</li>
<li style="width: 10%; height: 60px;" class="voyelle" data-foo="4">E</li>
<li style="width: 10%; height: 60px;" class="consonne" data-foo="1">F</li>
<li style="width: 10%; height: 20px;" class="consonne" data-foo="7">G</li>
</ul>

添加Dylay动画

<script>
jQuery(document).ready(function () {
var $dylay = jQuery('#dylay');
// 初始化
$dylay.dylay({
// 设置动画速度
speed: 1000,
// 动画类型
easing: 'easeOutElastic',
// 定义选择器
selector: '>li'
});
});

响应式流布局插件DyLay的更多相关文章

  1. Owl Carousel – 支持触摸的 jQuery 响应式传送带插件

    Owl Carousel 是一个 jQuery 插件,使我们能够迅速地创建响应式传送带滑块.这个插件是触摸友好的,能与几乎任何的 HTML 内容兼容使用.另外,强大的选项设置支持分页/滑动速度,启用/ ...

  2. jQuery响应式幻灯片插件jquery.glide.js(支持触摸&轻量级)

    找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...

  3. baguetteBox.js响应式画廊插件(纯JS)

    baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...

  4. 12款响应式 Lightbox(灯箱)效果插件

    灯箱效果(Lightbox)是网站中最常用的效果之一,用于实现类似模态对话框的效果.网络上各种 Lightbox 插件琳琅满目,随着响应式设计(Respnsive Design)的发展,这一先进理念也 ...

  5. FooTable高级的响应式表格jQuery插件

    FooTable是一个高级jQuery插件,允许开发者在触屏智能手机及平板电脑等小型设备上制作数据非常惊人的HTML表格.它可以将HTML表转换成可扩展的响应式表格,且通过单击某一行即可将该行数据隐藏 ...

  6. 另外一款超棒的响应式布局jQuery插件 – Freetile.js

    在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...

  7. Pizza Pie Charts – 基于 Snap SVG 框架的响应式饼图

    Pizza Pie Charts 是一个基于 Adobe 的 Snap SVG 框架的响应式饼图插件.它着重于集成 HTML 标记和 CSS,而不是 JavaScript 对象,当然Pizza Pie ...

  8. 超酷的响应式dribbble设计作品瀑布流布局效果

    相信做设计的朋友肯定都知道dribbble.com,它是一个非常棒的设计师分享作品的网站,全世界数以万计的设计高手和行家都在这个网站上分享自己的作品,当然,如果你常在上面闲逛的话,经常得到一些免费的好 ...

  9. 基于jquery响应式网站图片无限加载瀑布流布局

    分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览   源码下载 实 ...

随机推荐

  1. Ehcache RIM

    Ehcache不仅支持基本的内存缓存,还支持多种方式将本地内存中的缓存同步到其他使用Ehcache的服务器中,形成集群.如下图所示:   Ehcache支持多种集群方式,下面以RMI通信方式为例,来具 ...

  2. linux C读取数据库

    上次我们已经共同学习了在Linux下C连接数据库,下面一起学习用C语言来操作数据库. 1,首先要打开mysql的服务 [root@bogon ~]# service mysqld statusmysq ...

  3. Mac神器Iterm2的Shell Integration的用法和注意事项

    在iterm2 v3.0版本中有了个新的feature——Shell Integration,其中比较重要的功能就是可以取代传统的“rz”.“sz”(即:向服务器上传.下载文件) 具体的用法可以参见官 ...

  4. photoswipe

    allowUserZoom: 允许用户双击放大/移动方式查看图片. 默认值 = trueautoStartSlideshow: 当PhotoSwipe激活后,自动播放幻灯片. 默认值 = falsea ...

  5. 【转载】Xcode6中添加pch文件

    //原文地址:http://www.cnblogs.com/YouXianMing/p/3989155.html 1. 新建工程: 2. 创建pch文件:cmd+n->other->PCH ...

  6. HTML5 自定义属性 data-*介绍

    在HTML5之前HTML4我们也可以自定义属性通过setAttribute去设置或者直接写在HTML标签里面那么HTML5新增data-*(*可以替换成你喜欢的任意名字)属性有什么用呢? 更便的捷操作 ...

  7. Java-----判断是否为基本类型

    转载自:http://blog.csdn.net/hekewangzi/article/details/51969774

  8. linux 安装nodejs

    首先去官网下载代码,这里一定要注意安装分两种,一种是Source Code源码,一种是编译后的文件. 我就是按照网上源码的安装方式去操作编译后的文件,结果坑了好久好久.     注意看好你下载的是什么 ...

  9. PHP多种序列化/反序列化的方法 (转载)

    1. serialize和unserialize函数 这两个是序列化和反序列化PHP中数据的常用函数. <?php $a = array('a' => 'Apple' ,'b' => ...

  10. Word Amalgamation(hdoj1113)

    Word Amalgamation Problem Description In millions of newspapers across the United States there is a ...