滑鼠移入移出圖片時能在原圖產生動畫彈出且放大及回復原大小的效果演示範例demo及語法 ~ 猛甲茶道互動式創意網頁設計 Tea Road

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

</head>

<body>
<p>
<span class="boldBlue">Bubbleup</span> 能讓一般的圖示選單像泡泡一樣的放大彈出。當滑鼠移入到圖片上時能在原圖產生動畫彈出且放大的效果；當滑鼠移出後又能退回原位並回復原大小。<a name='more'></a>
<br><br><br>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://demonstration.abgne.tw/jquery/plugins/0095/js/jquery.bubbleup.js"></script>
<style type="text/css">
div#demo {
 margin: 5px auto 5px 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>
 <div id="demo">
 <ul id="menu">
<li> <a href="http://hala999.net/contact.php"> <img src="http://goo.gl/5J1O4K" alt="E-Mail Delivery"/></a> </li>
<li> <a href="http://hala999.net/forum.php"> <img src="http://goo.gl/5UThLp" alt="討論區"/></a> </li>
<li> <a href="http://www.facebook.com/tearoad/"> <img src="http://goo.gl/6uvwZA" alt="I'm on FaceBook"/></a> </li>
<li> <a href="https://plus.google.com/"> <img src="http://goo.gl/1U0sdl" alt="google+!"/></a> </li>
<li> <a href="http://hala999.net/board.php"> <img src="http://goo.gl/UsRhbb" alt="留言板"/></a> </li>
</ul>
</div>
<div style="clear: both;">
</div>
</body>
</html>

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

響應式網頁架站只要6,888元起|[RWD]響應式網站，自適應網頁，讓SEO搜尋引擎最佳化你的網站

"你是獵人還是獵物？"

3 comments :

匿名2014年11月11日晚上8:13
不好意思請問一下
如果要改字的位置是要改哪段程式碼呢? 感謝你 ><
回覆刪除
回覆
漁夫2014年11月14日晚上11:57
top: position.top - tipHeight, 改成 top: position.top + 100, //字變在圖的下方,改變字的上下位置

left: position.left + position.width / 2 - tipWidth /2, //改變字的左右位置
回覆刪除
回覆
匿名2014年11月15日下午2:48
感謝您的回覆 :)
不好意思如果我是把選單變直的
然後我現在想把字放在圖的右邊我要怎麼改呢?
謝謝您
這個網站讓人受益良多 ^^
回覆刪除
回覆

新增留言

1.猛甲茶道，歡迎多留言，可以幫自己網站打廣告~
2.需要猛甲茶道回覆，請勿使用匿名留言[可使用名稱/網址，名稱填自己名字，若無網址，請填E-mail]。
3.匿名攻訐、不相干之廣告適用於無條件刪去法，望請海涵:)
4.您可以使用一些 HTML 標記，如：
　<b>粗體</b>, <i>斜體</i>, <a href='網址'>描述文字</a>

Tea Road

Monga Shop

猛甲茶道互動式創意網頁設計 Tea Road