溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery 插件實(shí)現(xiàn)隨機(jī)自由彈跳氣泡樣式

發(fā)布時(shí)間：2020-09-30 13:20:03 來(lái)源：腳本之家 閱讀：214 作者：mrr 欄目：web開(kāi)發(fā)

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

jQuery 插件實(shí)現(xiàn)隨機(jī)自由彈跳氣泡樣式

在線演示

安裝方法

由于是基于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>

在此之前，我們還需要引入樣式依賴(lài)文件 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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手