jQuery 插件實(shí)現(xiàn)隨機(jī)自由彈跳氣泡樣式
一個(gè)基于jQuery的氣泡動(dòng)畫插件，在指定區(qū)域上方（左/右）定時(shí)間隔產(chǎn)生氣泡，然后隨機(jī)水平速度進(jìn)行仿自由落體運(yùn)動(dòng)。到達(dá)區(qū)域底部之后做彈跳運(yùn)動(dòng)，速度逐漸衰減。直至停止運(yùn)動(dòng)。
安裝方法
由于是基于jQuery的擴(kuò)展插件，因此引入jQuery是必須的。
此外，還需引入插件自身的實(shí)現(xiàn)腳本。
<scriptsrc="https://code.jquery.com/jquery-1.12.4.min.js"></script> <scriptsrc="../js/jquery.bubble.min.js"></script>
在此之前，我們還需要引入樣式依賴文件 jquery.bubble.min.css ，主要包含氣泡自身基礎(chǔ)樣式。
<link rel="stylesheet" href="../css/jquery.bubble.min.css">
使用示例
插件會(huì)在指定的元素范圍內(nèi)運(yùn)行，如果找不到指定的元素，插件將以body元素作為容器。
$(function(){
$('#J_PluginWrap').bubble({
// 氣泡元素Class
itemClass: 'J_BubbleItem',
// 氣泡大小范圍[最小值, 最大值]，單位px
size: [60, 120],
// 氣泡吹大時(shí)間范圍[最小值, 最大值]，單位s
blowTime: [0.5, 1],
// 氣泡出現(xiàn)的方向，left/right
direction: 'right',
// 位置偏移量，[x, y]，效果與 direction 相關(guān)
offset: [0, 60],
// 氣泡產(chǎn)生時(shí)間間隔，單位s
interval: 1.2,
// 自動(dòng)停止的時(shí)間，為0則不停止，單位s
autoStop: 10
});
});
更多詳細(xì)信息，請(qǐng)參看 源碼 。
以上所述是小編給大家介紹的jQuery 插件實(shí)現(xiàn)隨機(jī)自由彈跳氣泡樣式，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- 用JS生成UUID的方法實(shí)例
- Javascript生成全局唯一標(biāo)識(shí)符（GUID,UUID）的方法
- jQuery基于隨機(jī)數(shù)解決中午吃什么去哪吃問題示例
- jQuery實(shí)現(xiàn)的點(diǎn)贊隨機(jī)數(shù)字顯示動(dòng)畫效果(附在線演示與demo源碼下載)
- jQuery實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)效果的方法
- js jquery獲取隨機(jī)生成id的服務(wù)器控件的三種方法
- jquery輸入數(shù)字隨機(jī)抽獎(jiǎng)特效的簡(jiǎn)單實(shí)現(xiàn)代碼
- jQuery隨機(jī)密碼生成的方法
- jquery代碼實(shí)現(xiàn)簡(jiǎn)單的隨機(jī)圖片瀑布流效果
- 基于JQuery及AJAX實(shí)現(xiàn)名人名言隨機(jī)生成器
- JS實(shí)現(xiàn)點(diǎn)擊生成UUID的方法完整實(shí)例【基于jQuery】
相關(guān)文章
jQuery自定義元素右鍵點(diǎn)擊事件(實(shí)現(xiàn)案例)
下面小編就為大家?guī)硪黄猨Query自定義元素右鍵點(diǎn)擊事件(實(shí)現(xiàn)案例)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
jQuery實(shí)現(xiàn)彩帶延伸效果的網(wǎng)頁加載條loading動(dòng)畫
這篇文章主要介紹了jQuery實(shí)現(xiàn)彩帶延伸效果的網(wǎng)頁加載條loading動(dòng)畫,涉及jQuery動(dòng)畫效果的實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-10-10
頁面刷新時(shí)記住滾動(dòng)條的位置jquery代碼
這篇文章主要介紹了點(diǎn)擊按鈕頁面刷新的時(shí)候 記住滾動(dòng)條的位置,需要的朋友可以參考下2014-06-06
jQuery實(shí)現(xiàn)的多滑動(dòng)門，多選項(xiàng)卡效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的多滑動(dòng)門，多選項(xiàng)卡效果代碼,具有tab切換與滑動(dòng)門的功能,涉及鼠標(biāo)事件的響應(yīng)與頁面元素屬性動(dòng)態(tài)變換操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-03-03
jquery中快速取值的方法有很多，在本文為大家介紹下通過name實(shí)現(xiàn)快速取值，感興趣的朋友可以參考下2014-01-01
本文給大家分享的是使用jQuery+php解決input超多的表單提交的思路和方法，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要介紹了基于JQuery實(shí)現(xiàn)分隔條的功能的相關(guān)資料，使用JQuery技術(shù)實(shí)現(xiàn)分隔條的功能，感興趣的小伙伴們可以參考一下2016-06-06
jquery插件jquery.nicescroll實(shí)現(xiàn)圖片無滾動(dòng)條左右拖拽的方法
這篇文章主要介紹了jquery插件jquery.nicescroll實(shí)現(xiàn)圖片無滾動(dòng)條左右拖拽的方法,實(shí)例分析了jquery.nicescroll插件實(shí)現(xiàn)圖片拖拽效果的方法,需要的朋友可以參考下2015-08-08
最近項(xiàng)目中使用了一些插件來做頁面，這里把jQuery UI的使用分享出來，希望 對(duì)新手有幫助。文章結(jié)尾附源碼下載2012-10-10
基于jQuery和CSS3實(shí)現(xiàn)APPLE TV海報(bào)視差效果
這篇文章主要介紹了基于jQuery和CSS3實(shí)現(xiàn)APPLE TV海報(bào)視差效果,需要的朋友可以參考下2017-06-06