您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“jQuery如何實現隨機自由彈跳氣泡”,內容詳細,步驟清晰,細節處理妥當,希望這篇“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進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。