JS CSS實作一個氣泡提示框_javascript技巧

分享一個氣泡提示框，練習的技術有：（1）JS響應滑鼠的事件；（2）純CSS製作三角形。

效果這樣：
 
這是html：

複製代碼 代碼如下:

/**指向左側的三角形，外緣*/
.triRight{

z-index: 2; border: 10px solid #AAAAAA; border-color: transparent #AAAAAA transparent transparent; border-color: transparent #AAAAAA transparent transparent; width: 0; height: 0; position: absolute;

left:-20px;

top: 5px;
}






複製程式碼


程式碼如下:

/*先端が内側の左を向いた三角形*/

.triRightInner{ z-index: 3 border: 8px;ソリッド #FEFAB8; border-color: 透明 #FEFAB8 透明 透明;/*色はプロンプト ボックスの背景色と一致している必要があります*/ SPAN>

幅: 0; 高さ: 0; 位置: 左:-16px;}

"bubble_tooltip_content"

イベント,' これはプロンプト ボックスです。')" onmouseout="hideToolTip()"> ここにマウスを置くと、バブル ダイアログ ボックスが表示されます。

sharejs.com

[クリックして編集します。 ]

<br><p> style="FONT-FAMILY: Microsoft YaHei; FONT-SIZE: 18px"><strong>これは JavaScript コードです:</strong></p> <br><p> &lt ;/P> <br></p><pre class="javascript" name="code">function showToolTip(e,text){ <br>if(document.all)e = イベント; <br>var obj = document; getElementById ('bubble_tooltip'); <br>var obj2 = document.getElementById('bubble_tooltip_content'); <br>obj2.innerHTML = text; <br>var st (document.body.scrollTop,document.documentElement) .scrollTop); <br>if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; <br>var leftPos = e.clientX 20;イベント トリガーされたときのブラウザ ページ (またはクライアント領域) を基準としたマウス ポインターの水平座標 <br>if(leftPosobj.style.left = leftPos 'px'; >obj.style.top = e.clientY st 'px'; <br>obj.style.display = 'ブロック'; <br><br>関数 HideToolTip () <br>{ <br>var obj = document.getElementById('bubble_tooltip') <br>//obj.style.display = 'none'; <br>fadeOut(obj,5,0); >} <br><br>//要素の透明度を設定します。透明度の値は IE ルールに従って計算されます。つまり、0 ～ 100 <br>function SetOpacity(ev, v){ <br>ev.filters ev. style.filter = 'alpha(opacity =' v ')' : ev.style.opacity = v / 100; <br>} <br><br>//フェードイン効果 (指定された透明度へのフェードインを含む) <br>function fadeIn(elem,speed,opacity) { <br>/* <br>* パラメータの説明<br>* elem==> フェードインする必要がある要素 <br>* Speed==>gt;速度、正の整数 (オプション) <br>* opacity== >指定された透明度にフェードします、0~100 (オプション) <br>*/ <br>speed = 速度 || <br>opacity = opacity 20; || 100; <br>//要素の値は 0 の透明度 (非表示) を表示します。 <br>SetOpacity(elem, 0);初期化の透明度変更値は 0 です <br>var val = 0 ; <br>//透明度の値を 2 ずつ増加させるループ、つまりフェードイン効果 <br>(function(){ <br>SetOpacity(elem) , val); <br>val = 5; <br>if (val setTimeout(arguments.callee,speed) <br>} <br>}); <br><br>//フェードアウト効果 (指定した透明度へのフェードアウトを含む) <br>function fadeOut(elem,speed,opacity){ <br>/* <br>* パラメーターの説明<br>* elem== >フェードインする必要がある要素<br>* Speed==>フェードイン速度、正の整数 (オプション) <br>* opacity==> 指定された透明度にフェードインします、0~100 (オプション) <br>*/ <br>speed = 速度 || <br>opacity = opacity || <br>//透明度の変更値を 0 に初期化します <br>var = 100;透明度の値を 5 減らす、つまりフェードアウト効果 <br>(function(){ <br>SetOpacity(elem, val); <br>val -= 5; <br>if (val >= opacity) { <br>setTimeout(arguments.callee,speed); <br>}else if (val //要素の透明度が 0 になった後、要素を非表示にします <br>elem.style.display = 'なし'; <br>} <br>} <br><br><br><br><br><br>