男丁格爾's 脫殼玩

沒錯!只要 800 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

Bubbleup 能讓一般的圖示選單像泡泡一樣的放大彈出。當滑鼠移入到圖片上時能在原圖產生動畫彈出且放大的效果；當滑鼠移出後又能退回原位並回復原大小。

套件名稱：Bubbleup
套件版本：1.0
作者網站：http://aext.net/2010/04/bubbleup-jquery-plugin/
套件網址：N/A
發佈日期：2010-04-03
檔案大小：2.29 KB
檔案下載：jquery.bubbleup.js

參數說明：

檢視原始碼 JavaScript

tooltip(選填)
描述： 是否啟用文字提示
預設值： false
 
scale(選填)
描述： 圖片放大的尺寸
預設值： 96
 
fontFamily(選填)
描述： 文字提示的字體字型
預設值： Helvetica, Arial, sans-serif
 
color(選填)
描述： 文字提示的字體顏色
預設值： #333333
 
fontSize(選填)
描述： 文字提示的字體尺寸
預設值： 12
 
fontWeight(選填)
描述： 文字提示的字體寬度
預設值： bold
 
inSpeed(選填)
描述： 當滑鼠移入圖片後放大的速度
預設值： fast
 
outSpeed(選填)
描述： 當滑鼠移出圖片後回復的速度
預設值： fast

方法說明：

檢視原始碼 JavaScript

1 2	// 把指定元素轉換成 Bubbleup 效果 $(selector).bubbleup(options);

使用範例：

檢視原始碼 JavaScript

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.bubbleup.js"></script>
<style type="text/css">
div#demo {
	margin: 50px auto 50px auto;
	text-align: center;
}
div#demo ul#menu {
    margin: 5px 0px;
    list-style: none;
    display: inline-block;
}   
div#demo ul#menu li {
    padding: 0px;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
    width: 48px;
    height: 48px;
}
div#demo ul#menu li a {
    position: absolute;
}
div#demo ul#menu li img {
    position: absolute;
    width: 48px;
    top: 0px;
    left: 0px;
    padding: 0px;
    margin: 0 8px 0 0;
    border: none;
    overflow: hidden;
}
</style>
<script type="text/javascript">
	$(function(){
		// 把 #menu 轉成 Bubbleup 效果
		// 同時當滑鼠移入到選單時出現文字提示
		$("div#demo ul#menu li img").bubbleup({
			tooltip: true, 
			scale: 96
		});
	});
</script>
 
<body>
	<div id="demo">
		<ul id="menu">
			<li> <a href="http://feeds.feedburner.com/abgne"><img src="images/feed.png" alt="Full RSS Feed"/></a> </li>
			<li> <a href="http://feedburner.google.com/fb/a/mailverify?uri=abgne"> <img src="images/email.png" alt="E-Mail Delivery"/></a> </li>
			<li> <a href="http://twitter.com/abgne_tw"> <img src="images/twitter.png" alt="Follow us on Twitter"/></a> </li>
			<li> <a href="http://facebook.com/"> <img src="images/facebook.png" alt="I'm on FaceBook"/></a> </li>
			<li> <a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=http://abgne.tw&amp;title=abgne.tw', 'delicious','toolbar=no,width=550,height=550'); return false;"> <img src="images/delicious.png" alt="Save it!"/></a> </li>
			<li> <a href="http://technorati.com/faves?sub=addfavbtn&add=http://abgne.tw"> <img src="images/technorati.png" alt="Favorite this blog"/></a> </li>
		</ul>
	</div>
	<div style="clear: both;"></div>
</body>
</body>

範例 1

檔案描述
基本的範例檔案(免空)	開始下載
基本的範例檔案	會員限定

也許您對這些文章也有興趣

18 筆針對 [jQ]Bubbleup 1.0 的迴響

Lay 於 2010-08-27 13:38:28 說：

這個好棒!!

阿裡面的圖示是從哪裡找的咧??

我喜歡❤

回覆 ↓
- 男丁格爾於 2010-08-27 16:25:30 說：
  
  範例的是用作者提供的圖片
  
  回覆 ↓
Lay 於 2010-08-28 09:59:57 說：

你那個範例裡的連結錯誤了....
　　

回覆 ↓
- 男丁格爾於 2010-08-28 10:04:55 說：
  
  是最後一個嗎?
  不過單純展示效果的話...我的連結錯就算了..各位的千萬不能錯XD
  
  回覆 ↓
Lay 於 2010-08-28 14:57:13 說：

不是不是...
是這個錯了：
　　作者網站：http://http://aext.net/2010/04/bubbleup-jquery-plugin/

應為
　　作者網站：http://aext.net/2010/04/bubbleup-jquery-plugin/

回覆 ↓
- 男丁格爾於 2010-08-28 20:32:14 說：
  
  已修正..謝哩
  
  回覆 ↓
Lay 於 2010-08-28 15:03:21 說：

為什麼留言送不出來QQ

回覆 ↓
- 男丁格爾於 2010-08-28 20:33:01 說：
  有網址的留言可能會被當廣告留言喔..記得改用
  
  檢視原始碼 PHP
  1
  [link href="網址"]
  回覆 ↓
HD 於 2010-12-14 14:55:03 說：

耶好奇怪喔我在
$("div#demo ul#menu li img").bubbleup({tooltip: true, scale:96,color:#ff0000});
加上參數 color:#FF0000
整個就不會動了，
怎麼會這樣呢
可以幫我看一下嗎?
網址如下
http://tellustek.asuscomm.com:3116/~q0821/bubbleup/
謝謝

回覆 ↓
- 男丁格爾於 2010-12-15 22:30:31 說：
  
  #ff0000 要用雙引號或單引號包起來才行, 它只是一個字串...
  
  回覆 ↓
marshih 於 2011-03-17 13:16:07 說：

請問男丁大大，最左邊一定會有約50px的間隔有辦法修改嗎，調整了很多數值，但唯獨左邊的間隔無法變更，另外再請問滑鼠移動過去時上方會出現的文字要如何修改成下方出現呢？十分感謝

回覆 ↓
- 男丁格爾於 2011-03-18 09:31:54 說：
  
  我不知道你所謂的最左邊有 50px 的間隔是怎樣哩..!?
  可以的話弄個簡單的範例丟上來讓大家幫你看看, 或是直接到討論區去發問及張貼程式碼內容!!
  
  回覆 ↓
fallowmei 於 2011-07-26 11:54:15 說：

好可愛喔~~

回覆 ↓
min 於 2012-02-09 20:28:07 說：

http://jquery-quickzoom.com/
另一個搭上 easing效果的ㄉㄨㄞㄉㄨㄞ zoom~
終於發現了

回覆 ↓
- 男丁格爾於 2012-02-16 14:24:49 說：
  
  也不錯哩, 改天來試看看!
  
  回覆 ↓
shirley 於 2012-04-10 02:42:56 說：

請問要如何更改文字提示的位置呢？想要將文字提示改到圖片的左邊...

回覆 ↓
- 男丁格爾於 2012-04-16 20:09:49 說：
  
  看一下程式應該是寫死只能顯示在上方, 若要改在左邊的話, 可以自行修改一下大概是在原始碼 34-39 行的部份
  
  回覆 ↓
  - shirley 於 2012-04-18 22:25:04 說：
    
    終於試成功了！謝謝老師的提示！！！
    
    回覆 ↓