欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

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 });});

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r50389.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-06-11 12:13 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。