当前位置: 首页 > article >正文

jquery弹性动画特效插件DomLastic.js

DomLastic.js是一款jquery弹性动画特效插件。通过该jquery弹性动画特效插件你可以管理一组DOM元素,为它们制作效果炫酷的弹性动画特效。

在这里插入图片描述
在线预览 下载

使用方法

在页面中引入jquery和domlastic.js文件。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/domlastic.js"></script>      

HTML结构
对于一组DOM元素,例如一组

元素,你要制作弹性动画效果,其HTML结构如下:

<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弹性动画特效插件。

domLastic.init({
  itemsClassnameToConnect: 'item'
});  

配置参数

DomLastic.js弹性动画特效插件的可用配置参数如下:

参数类型默认值
itemsClassnameToConnectstring
itemsJointStrengthint20
animationSpeedint(毫秒)600
animationIntensityfloat0.5
animationDirectionstring默认为'horizontal',可选值为'vertical'
callback函数
例如:
<div>
  <div class="item"><img src="..." /></div>
  <div class="item"><img src="..." /></div>
  <div class="item"><img src="..." /></div>
</div>    
<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参数可用于在弹性动画执行结束后的回调函数。

domLastic.init({
  callback: function(){
    // 执行某些操作
  }
});   

如果需要手动执行元素的弹性动画特效,可以使用animateItems()方法。

domLastic.animateItems();     

http://www.kler.cn/a/447563.html

相关文章:

  • ubuntu22.04编译安装Opencv4.8.0+Opencv-contrib4.8.0教程
  • centos7下docker 容器实现redis主从同步
  • IIC I2C子协议 SMBus协议 通信协议原理 时序 SMBus深度剖析
  • Hive内部表和外部表的区别
  • 使用Python实现量子通信模拟:探索安全通信的未来
  • MCU驱动使用
  • 基于cobra开发的k8s命令行管理工具k8s-manager
  • Redis篇--常见问题篇9--其他一些问题
  • Coding Caprice - Linked-List 1
  • 【第八节】git与github
  • 【Leecode】Leecode刷题之路第88天之合并两个有序数组
  • Linux下基于最新稳定版ESP-IDF5.3.2开发esp32s3入门任务间的通讯-信号量【入门三】
  • 前端项目打包部署后,如何避免让用户强制去清除浏览器缓存
  • STM32低功耗模式结合看门狗
  • 【RK3588 Linux 5.x 内核编程】-内核中断与ThreadedIRQ
  • 学习Cookie 提升
  • 裸机按键输入实验
  • linux源码编译libunwind
  • 条款34 考虑lambda而非std::bind
  • JS中的innerHTML,innerText,value的区别
  • STM32-笔记5-按键点灯(中断方法)
  • java线程
  • Unity实用技能-协作规范总结
  • MySQL数据库下载及安装教程
  • linux美化命令行
  • 文件I/O操作:C语言