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 相关文章推荐
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
Vue.js一个文件对应一个组件实践
Oct 27 Javascript
移动端界面的适配
Jan 11 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
javascript实现多边形碰撞检测
Oct 24 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
php修改时间格式的代码
2011/05/29 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
php实现cookie加密的方法
2015/03/10 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
PDO::quote讲解
2019/01/29 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
js module大战
2019/04/19 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
Python获取linux主机ip的简单实现方法
2016/04/18 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
Python中property函数用法实例分析
2018/06/04 Python
Python中交换两个元素的实现方法
2018/06/29 Python
Python requests库用法实例详解
2018/08/14 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
快速了解Python开发环境Spyder
2020/06/29 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
自荐信怎么写呢?
2013/12/09 职场文书
企业安全生产责任书
2014/04/14 职场文书
协议书与合同的区别
2014/04/18 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
人民调解协议书范本
2014/10/11 职场文书
高老头读书笔记
2015/06/30 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python