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. YII学习(第一天)

    #Apache # 设置文档根目录为 "basic/web" DocumentRoot "path/to/basic/web" <Directory &q ...

  2. #include<math.h>

    1.sin(a)类:a是弧度值: 2.abs(b):结果是b的绝对值: 3.exp(c):exp()用来计算以e为底的x次方值,即ex值,然后将结果返回.返回值: 返回e的x次方计算结果. 4.log ...

  3. LED音乐频谱之输出数据处理

    转载请注明出处:http://blog.csdn.net/ruoyunliufeng/article/details/38023539 一.PWM调节 1.初始化 void DACInit() { C ...

  4. hdu 3061 (最大权闭合图)

    分析:城池之间有依赖关系,汇点与能获得兵力的城池连接,容量为可以获得的兵力,损耗兵力的城池与汇点连接容量为损耗的兵力,有依赖关系的城池间连边,容量为无穷大,跑网络流求出的最小割就是损耗的最小兵力,,, ...

  5. 使用java连接hive,并执行hive语句详解

    安装hadoop 和 hive我就不多说了,网上太多文章 自己看去 首先,在机器上打开hiveservice hive --service hiveserver -p 50000 & 打开50 ...

  6. QUdpSocket Class

    翻译自:QT官网文档QUdpSocket类 QUdpSocket类提供一个UDP套接字. Header: #include <QUdpSocket> qmake: QT += networ ...

  7. 【巧妙消维DP】【HDU2059】龟兔赛跑

    龟兔赛跑 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  8. 用maven骨架生成项目速度慢的问题

    最近从IntelliJ Idea 14的Community版本切换到Ultimate. 问题出现 最近从IntelliJ Idea 14的Community版本切换到Ultimate,key是从网络上 ...

  9. uploadify按钮中文乱码问题

    uploadify是一款基于jQuery库的上传插件,但很可惜的是无论你怎么设置参数buttonText ,它的中文按钮都会出现乱码的情况,现把出现原因及解决方法总结如下.       那么出现这种的 ...

  10. Android Studio Errors

    1.The import org.apache.http.client; tip: cannot be resolved; resolve: add this line in build.gradle ...