July 29, 2011
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>
<!----------------------------------------------------------------------------------------------->
<!--▼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>
<!----------------------------------------------------------------------------------------------->
<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>
<!----------------------------------------------------------------------------------------------->
<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
頁面會上下開啓的功能 (Intr
0 Comment(s)
