插件描述：通过该jquery弹性动画特效插件你可以管理一组DOM元素，为它们制作效果炫酷的弹性动画特效。
DomLastic.js是一款jquery弹性动画特效插件。通过该jquery弹性动画特效插件你可以管理一组DOM元素，为它们制作效果炫酷的弹性动画特效。
安装
可以通过npm或bower来安装DomLastic.js jquery弹性动画特效插件。
# NPM
1 | $ npm install domlastic --save |
# Bower
1 | $ bower install domlastic --save |
使用方法
在页面中引入jquery和domlastic.js文件。
1 2 | <script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/domlastic.js"></script> |
HTML结构
对于一组DOM元素，例如一组<div>元素，你要制作弹性动画效果，其HTML结构如下：
1 2 3 4 5 6 7 8 9 10 11 | <div class="listToAnimate"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> <div class="item">项目4</div> <div class="item">项目5</div> <div class="item">项目6</div> <div class="item">项目7</div> <div class="item">项目8</div> <div class="item">项目9</div></div> |
初始化插件
在页面DOM元素加载完毕之后，你可以通过下面的方法来初始化该jquery弹性动画特效插件。
1 2 3 | domLastic.init({ itemsClassnameToConnect: 'item'}); |
配置参数
DomLastic.js弹性动画特效插件的可用配置参数如下：
| 参数 | 类型 | 默认值 |
| itemsClassnameToConnect | string | 无 |
| itemsJointStrength | int | 20 |
| animationSpeed | int（毫秒） | 600 |
| animationIntensity | float | 0.5 |
| animationDirection | string | 默认为'horizontal'，可选值为'vertical' |
| callback | 函数 | 无 |
animationDirection类型：
'horizontal'
'vertical'
实例：
1 2 3 4 5 | <div> <div class="item"><img src="..." /></div> <div class="item"><img src="..." /></div> <div class="item"><img src="..." /></div></div> |
1 2 3 4 5 6 7 8 9 10 | <script>domLastic.init({ itemsClassnameToConnect: 'item', itemsJointStrength: 10, //value optimum between 10 - 100 animationSpeed: 500, //value optimum 300 - 1000 animationIntensity: 0.6, //value optimum optimum 0.5 - 1 animationDirection: 'horizontal'});domLastic.animateItems();</script> |
callback参数可用于在弹性动画执行结束后的回调函数。
1 2 3 4 5 | domLastic.init({ callback: function(){ // 执行某些操作 }}); |
如果需要手动执行元素的弹性动画特效，可以使用animateItems()方法。
1 | domLastic.animateItems(); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com