JS CSS はバブルプロンプトを実装します。 box_javascript スキル

バブル プロンプト ボックスを共有する方法は次のとおりです。(1) JS がマウス イベントに応答します。(2) 純粋な CSS が三角形を作成します。

効果は次のとおりです:

これは HTML です:

コードをコピーします コードは次のとおりです:

< title>バブル ダイアログ

"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 = 'なし'; 
} 
} 

関連ラベル：

气泡提示框

ソース：php.cn

前の記事：JQUERY IFrame でオブジェクトを取得し、その親 window_jquery でオブジェクトを取得する例 次の記事：タイムスタンプを年、月、日、時刻に変換するJS関数_javascriptスキル

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• BlackRock Labels BTC a Unique Diversifier
  2024-09-20 15:51:33
• Internet Computer (ICP) Price Prediction: Will ICP Price Hit $24?
  2024-09-20 15:47:32
• Worldcoin (WLD) Price Prediction 2022-23
  2024-09-20 15:45:32
• 今日投資すべきトップミームコイン
  2024-09-20 15:39:32
• Floki (FLOKI) 価格予測: 刷新されたマーケティングは Floki が 10 月の利益を取り戻すのに役立ちますか?
  2024-09-20 15:38:32
• Next Cryptocurrency to Explode: 5 Coins to Add to Your Watchlist
  2024-09-20 15:27:32
• Dogecoin: From an Internet Meme to a Digital Currency with a Billion-Dollar Market Capitalization
  2024-09-20 15:26:32
• ZChains Unveils a Series of Exciting Updates and Launches to Enhance Its Ecosystem
  2024-09-20 15:12:32
• Apple 版の Little Fox Payment Platform をダウンロードする方法
  2024-09-20 14:53:01
• 初心者がMetaMaskで取引する方法とその利点と欠点
  2024-09-20 14:51:01

最新の問題

エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...

から 2024-04-04 18:40:04

0

1

3528

CSS 行クラスにより、一部の要素がフレーム外になりますが、要素は静的で表示の下部に固定される必要があります。 現在の私のページはこんな感じです。 2 つの要素が隣り合うように行クラスを追加すると、下部のナビゲーション バーがスクロールする必要がある位置まで押し下げられます。ここでは、行要素...

から 2024-04-03 18:48:12

0

1

281

CSSでグリッド線を表示できますか? CSSグリッドレイアウトを学び始めました。理想的な世界では、複数のグリッド ボックスを含む div を設定し、その中に要素を正確に配置し、必要に応じてオーバーレイを提供できるように...

から 2024-03-31 20:38:21

0

2

395

関連トピック

詳細>

• Douyinでライブブロードキャストの再生記録を視聴する方法
• WeChatキャンペーンをキャンセルする
• 光学ドライブとは何ですか
• WeChatの自動ダウンロードをオフにする方法
• jsreplace関数の使い方
• Eou Web3 ウォレットのチュートリアル
• 活動とはどういう意味ですか?
• Pythonで大文字を小文字に変換する機能の紹介