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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
基于jquery的气泡提示效果
May 31 Javascript
javascript中万恶的function实例分析
May 25 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
小程序自定义日历效果
Dec 29 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
js实现登录时记住密码的方法分析
Apr 05 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中通过curl检测页面是否被百度收录
2013/09/27 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Python translator使用实例
2008/09/06 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
对于Python中RawString的理解介绍
2016/07/07 Python
深入理解NumPy简明教程---数组2
2016/12/17 Python
Python Socket编程详细介绍
2017/03/23 Python
Django ModelForm操作及验证方式
2020/03/30 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
18岁生日感言
2014/01/12 职场文书
小区门卫值班制度
2014/01/24 职场文书
护士长竞聘书
2014/03/31 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
心灵捕手观后感
2015/06/02 职场文书
环保主题班会教案
2015/08/13 职场文书