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 组件之旅(二)编码实现和算法
Oct 28 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
js实现橱窗展示效果
Jan 11 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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
smarty内置函数foreach用法实例
2015/01/22 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python实现遍历数据库并获取key的值
2015/05/17 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
《小小竹排画中游》教学反思
2014/02/26 职场文书
二手房买卖协议书
2014/04/10 职场文书
人事经理岗位职责
2014/04/28 职场文书
励志演讲稿500字
2014/08/21 职场文书
离婚民事起诉状
2015/08/03 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python