在线演示
安装方法
由于是基于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">使用示例
$(function(){$("#J_PluginWrap").bubble({// 气泡元素ClassitemClass: "J_BubbleItem",// 气泡大小范围[最小值, 最大值],单位pxsize: [60, 120],// 气泡吹大时间范围[最小值, 最大值],单位sblowTime: [0.5, 1],// 气泡出现的方向,left/rightdirection: "right",// 位置偏移量,[x, y],效果与 direction 相关offset: [0, 60],// 气泡产生时间间隔,单位sinterval: 1.2,// 自动停止的时间,为0则不停止,单位sautoStop: 10});});更多详细信息,请参看 源码 。