一個(gè)基于jQuery的氣泡動畫插件，在指定區(qū)域上方（左/右）定時(shí)間隔產(chǎn)生氣泡，然后隨機(jī)水平速度進(jìn)行仿自由落體運(yùn)動。到達(dá)區(qū)域底部之后做彈跳運(yùn)動，速度逐漸衰減。直至停止運(yùn)動。
安裝方法
由于是基于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">
使用示例
插件會在指定的元素范圍內(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, // 自動停止的時(shí)間，為0則不停止，單位s autoStop: 10 });});更多詳細(xì)信息，請參看 源碼 。
以上所述是小編給大家介紹的jQuery 插件實(shí)現(xiàn)隨機(jī)自由彈跳氣泡樣式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
