CSS图书馆 » HTML & CSS » 响应式流布局插件DyLay-动画效果很赞哦!

响应式流布局插件DyLay-动画效果很赞哦!

发表于: HTML & CSS, 优秀设计资源, 前端开发. 评论
赞助商链接

今天我们为大家介绍一个响应式流布局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'
	});
});

好了, 就这么多,如果不懂就直接下载我拉DEMO页面来看吧。

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。