jQuery 插件实现随机自由弹跳气泡样式


Posted in Javascript onJanuary 12, 2017

一个基于jQuery的气泡动画插件,在指定区域上方(左/右)定时间隔产生气泡,然后随机水平速度进行仿自由落体运动。到达区域底部之后做弹跳运动,速度逐渐衰减。直至停止运动。

jQuery 插件实现随机自由弹跳气泡样式

在线演示

安装方法

由于是基于jQuery的扩展插件,因此引入jQuery是必须的。

此外,还需引入插件自身的实现脚本。

<scriptsrc="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<scriptsrc="../js/jquery.bubble.min.js"></script>

在此之前,我们还需要引入样式依赖文件 jquery.bubble.min.css ,主要包含气泡自身基础样式。

<link rel="stylesheet" href="../css/jquery.bubble.min.css">

使用示例

插件会在指定的元素范围内运行,如果找不到指定的元素,插件将以body元素作为容器。

$(function(){
  $('#J_PluginWrap').bubble({
    // 气泡元素Class
    itemClass: 'J_BubbleItem',
    // 气泡大小范围[最小值, 最大值],单位px
    size: [60, 120],
    // 气泡吹大时间范围[最小值, 最大值],单位s
    blowTime: [0.5, 1],
    // 气泡出现的方向,left/right
    direction: 'right',
    // 位置偏移量,[x, y],效果与 direction 相关
    offset: [0, 60],
    // 气泡产生时间间隔,单位s
    interval: 1.2,
    // 自动停止的时间,为0则不停止,单位s
    autoStop: 10
  });
});

更多详细信息,请参看 源码 。

以上所述是小编给大家介绍的jQuery 插件实现随机自由弹跳气泡样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript学习笔记5 类和对象
Jan 11 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
JavaScript实现简单拖拽效果
Sep 15 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 #Javascript
jQuery Validate 数组 全部验证问题
Jan 12 #Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 #Javascript
React创建组件的三种方式及其区别
Jan 12 #Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 #Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 #Javascript
React组件的三种写法总结
Jan 12 #Javascript
You might like
基于mysql的论坛(7)
2006/10/09 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
JavaScript Sort 表格排序
2009/10/31 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
python交互式图形编程实例(一)
2017/11/17 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
Python闭包函数定义与用法分析
2018/07/20 Python
python 多线程串行和并行的实例
2019/02/22 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
如何更优雅地写python代码
2019/07/02 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
python类中super() 的使用解析
2019/12/19 Python
python中可以声明变量类型吗
2020/06/18 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
启动仪式策划方案
2014/06/14 职场文书
2015元旦节寄语
2014/12/08 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书