一個基于jQuery的氣泡動畫插件，在指定區(qū)域上方（左/右）定時間隔產(chǎn)生氣泡，然后隨機水平速度進行仿自由落體運動。到達區(qū)域底部之后做彈跳運動，速度逐漸衰減。直至停止運動。

創(chuàng)新互聯(lián)長期為近千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為東湖企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、做網(wǎng)站，東湖網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

在線演示

安裝方法

由于是基于jQuery的擴展插件，因此引入jQuery是必須的。

此外，還需引入插件自身的實現(xiàn)腳本。

在此之前，我們還需要引入樣式依賴文件 jquery.bubble.min.css ，主要包含氣泡自身基礎(chǔ)樣式。

使用示例

插件會在指定的元素范圍內(nèi)運行，如果找不到指定的元素，插件將以body元素作為容器。

$(function(){
  $('#J_PluginWrap').bubble({
    // 氣泡元素Class
    itemClass: 'J_BubbleItem',
    // 氣泡大小范圍[最小值, 最大值]，單位px
    size: [60, 120],
    // 氣泡吹大時間范圍[最小值, 最大值]，單位s
    blowTime: [0.5, 1],
    // 氣泡出現(xiàn)的方向，left/right
    direction: 'right',
    // 位置偏移量，[x, y]，效果與 direction 相關(guān)
    offset: [0, 60],
    // 氣泡產(chǎn)生時間間隔，單位s
    interval: 1.2,
    // 自動停止的時間，為0則不停止，單位s
    autoStop: 10
  });
});

更多詳細信息，請參看 源碼 。

以上所述是小編給大家介紹的jQuery 插件實現(xiàn)隨機自由彈跳氣泡樣式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！