jQuery 插件實現(xiàn)隨機自由彈跳氣泡樣式
一個基于jQuery的氣泡動畫插件,在指定區(qū)域上方(左/右)定時間隔產生氣泡,然后隨機水平速度進行仿自由落體運動。到達區(qū)域底部之后做彈跳運動,速度逐漸衰減。直至停止運動。
安裝方法
由于是基于jQuery的擴展插件,因此引入jQuery是必須的。
此外,還需引入插件自身的實現(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 ,主要包含氣泡自身基礎樣式。
<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], // 氣泡出現(xiàn)的方向,left/right direction: 'right', // 位置偏移量,[x, y],效果與 direction 相關 offset: [0, 60], // 氣泡產生時間間隔,單位s interval: 1.2, // 自動停止的時間,為0則不停止,單位s autoStop: 10 }); });
更多詳細信息,請參看 源碼 。
以上所述是小編給大家介紹的jQuery 插件實現(xiàn)隨機自由彈跳氣泡樣式,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- 用JS生成UUID的方法實例
- Javascript生成全局唯一標識符(GUID,UUID)的方法
- jQuery基于隨機數(shù)解決中午吃什么去哪吃問題示例
- jQuery實現(xiàn)的點贊隨機數(shù)字顯示動畫效果(附在線演示與demo源碼下載)
- jQuery實現(xiàn)轉動隨機數(shù)抽獎效果的方法
- js jquery獲取隨機生成id的服務器控件的三種方法
- jquery輸入數(shù)字隨機抽獎特效的簡單實現(xiàn)代碼
- jQuery隨機密碼生成的方法
- jquery代碼實現(xiàn)簡單的隨機圖片瀑布流效果
- 基于JQuery及AJAX實現(xiàn)名人名言隨機生成器
- JS實現(xiàn)點擊生成UUID的方法完整實例【基于jQuery】
相關文章
jquery+CSS實現(xiàn)的水平布局多級網(wǎng)頁菜單效果
這篇文章主要介紹了jquery+CSS實現(xiàn)的水平布局多級網(wǎng)頁菜單效果,涉及jquery頁面元素屬性動態(tài)變換效果實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08jquery實現(xiàn)標簽支持圖文排列帶上下箭頭按鈕的選項卡
這篇文章主要介紹了jquery實現(xiàn)標簽支持圖文排列帶上下箭頭按鈕的選項卡的特效,效果十分不錯,而且非常實用,有需要的小伙伴參考下吧。2015-03-03