<![CDATA[A.PAO designSTUDIO BLOG]]> https://blog.apao.idv.tw/index.php zh-tw https://blog.apao.idv.tw/post// <![CDATA[文字說明氣球 (jQuery Bubble Popup)]]> apao <apao@www.apao.idv.tw> Fri, 29 Jul 2011 02:52:19 +0000 https://blog.apao.idv.tw/post// 點擊在新視窗中瀏覽此圖片
demo：jQuery Bubble Popup

這個是以事前指定氣球出現的說明文字但是不是在(TITLE)上指定。可更改淡入淡出的方式，也可更改氣球的顏色，說明文字的多寡，氣球會自動調整。由於淡入淡出的方式，不會影響畫面整體的感覺。

下載點：
http://plugins.jquery.com/project/jqBubblePopup

下載後，檔案構成：
點擊在新視窗中瀏覽此圖片

依照需求放置恰當的檔案夾：
點擊在新視窗中瀏覽此圖片


<!-- 於<head>與</head>之 間-->
<!----------------------------------------------------------------------------------------------->
<!--▼CSSを読み込む-->
<link href="css/jquery.bubblepopup.v2.3.1.css" rel="stylesheet" type="text/css" />
<!--▼jqueryを読み込む-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<!--▼jQuerybubblepopupプラグインを読み込む-->
<script src="js/jquery.bubblepopup.v2.3.1.min.js" type="text/javascript"></script>



<!-- <body>與</body>之間，重點是 class="button" 才會出現[說明氣球] -->
<!----------------------------------------------------------------------------------------------->
<h1>jQuery Bubble Popupを使ってみる。</h1>
<div class="button" style="margin:100px;">  
<p style="text-align:center;">これは<div>タグ内のテキストです。</p>
<!--/#test1--></div>



<!--於 </head>之前加入以下Javascript就會出現動畫效果 -->
<!----------------------------------------------------------------------------------------------->
<script type="text/javascript">
<!-- $(document).ready(function(){
      //$()の中には、ポップを表示させたい要素のID属性、クラス、タグ名を記述します。
     $('.button').CreateBubblePopup({
       //▼上からポップを落とす。
       position : 'top',
      //▼要素の真ん中にポップが来るようにする。
       align   : 'center',
       //▼ポップ内テキストを設定する。
       innerHtml: 'フワッとポップが<br />出てくることに成功しました！！',
       //▼ポップ内のスタイル属性を設定する。
       innerHtmlStyle: {
         color:'#FFFFFF',
          'text-align':'center'
       },
      //▼ポップの色を決める。※jquerybubblepopup-themeフォルダ参照
       themeName:   'all-black',
       //▼jquerybubblepopup-themeフォルダの相対パスを記述する。
       themePath:   'images/jquerybubblepopup-theme'
    });
}); //--> </script>


參考網站：
http://hakashun.net/2011/04/jquery-bubble-popup.html

應用網站：
http://www.jetoy.com.tw/02-Products.html
點擊在新視窗中瀏覽此圖片


Tags - , , , ]]> https://blog.apao.idv.tw/post//#blogcomment <![CDATA[[評論] 文字說明氣球 (jQuery Bubble Popup)]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 https://blog.apao.idv.tw/post//#blogcomment