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 透明 透明;/*色はプロンプト ボックスの背景色と一致している必要があります*/

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

"bubble_tooltip_content"

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

sharejs.com

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

 style="FONT-FAMILY: Microsoft YaHei; FONT-SIZE: 18px">これは JavaScript コードです:
 
 < ;/P> 
function showToolTip(e,text){ 
if(document.all)e = イベント; 
var obj = document; getElementById ('bubble_tooltip'); 
var obj2 = document.getElementById('bubble_tooltip_content'); 
obj2.innerHTML = text; 
var st (document.body.scrollTop,document.documentElement) .scrollTop); 
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; 
var leftPos = e.clientX 20;イベント トリガーされたときのブラウザ ページ (またはクライアント領域) を基準としたマウス ポインターの水平座標 
if(leftPosobj.style.left = leftPos 'px'; >obj.style.top = e.clientY st 'px'; 
obj.style.display = 'ブロック'; 

関数 HideToolTip () 
{ 
var obj = document.getElementById('bubble_tooltip') 
//obj.style.display = 'none'; 
fadeOut(obj,5,0); >} 

//要素の透明度を設定します。透明度の値は IE ルールに従って計算されます。つまり、0 ～ 100 
function SetOpacity(ev, v){ 
ev.filters ev. style.filter = 'alpha(opacity =' v ')' : ev.style.opacity = v / 100; 
} 

//フェードイン効果 (指定された透明度へのフェードインを含む) 
function fadeIn(elem,speed,opacity) { 
/* 
* パラメータの説明
* elem==> フェードインする必要がある要素 
* Speed==>gt;速度、正の整数 (オプション) 
* opacity== >指定された透明度にフェードします、0~100 (オプション) 
*/ 
speed = 速度 || 
opacity = opacity 20; || 100; 
//要素の値は 0 の透明度 (非表示) を表示します。 
SetOpacity(elem, 0);初期化の透明度変更値は 0 です 
var val = 0 ; 
//透明度の値を 2 ずつ増加させるループ、つまりフェードイン効果 
(function(){ 
SetOpacity(elem) , val); 
val = 5; 
if (val < = 不透明度) { 
setTimeout(arguments.callee,speed) 
} 
}); 

//フェードアウト効果 (指定した透明度へのフェードアウトを含む) 
function fadeOut(elem,speed,opacity){ 
/* 
* パラメーターの説明
* elem== >フェードインする必要がある要素
* Speed==>フェードイン速度、正の整数 (オプション) 
* opacity==> 指定された透明度にフェードインします、0~100 (オプション) 
*/ 
speed = 速度 || 
opacity = opacity || 
//透明度の変更値を 0 に初期化します 
var = 100;透明度の値を 5 減らす、つまりフェードアウト効果 
(function(){ 
SetOpacity(elem, val); 
val -= 5; 
if (val >= opacity) { 
setTimeout(arguments.callee,speed); 
}else if (val < 0) { 
//要素の透明度が 0 になった後、要素を非表示にします 
elem.style.display = 'なし'; 
} 
} 

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JQUERY 取得IFrame中物件及取得其父視窗中物件範例_jquery下一篇：JQUERY 取得IFrame中物件及取得其父視窗中物件範例_jquery

相關文章

看更多

• 深入淺析Bootstrap列表組元件
• JavaScript函數柯里化詳解
• JS密碼產生與強度偵測完整實例(附demo源碼下載)
• Angularjs整合微信UI（weui）
• JavaScript快速切換繁體中文和簡體中文的方法及網站支援簡繁體切換的絕招_javascript技巧

• 首頁

• 課程

• 問答

• 我的

• 首頁
• 課程
• 文章
• 問答
• 詞典
• 手册
• 下載
• 專題

首頁

文章

問答

課程

專題

下載

遊戲

詞典

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）