溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一個基于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
});
});
更多詳細信息，請參看 源碼 。
以上所述是小編給大家介紹的jQuery 插件實現隨機自由彈跳氣泡樣式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
