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

相關標籤：

气泡提示框

來源：php.cn

上一篇：JQUERY 取得IFrame中物件及取得其父視窗中物件範例_jquery 下一篇：時間戳記轉換為時間 年月日時間的JS函數_javascript技巧

本網站聲明

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

作者最新文章

• 什麼是 NullPointerException，如何修復它？
  2024-10-22 09:46:29
• 從新手到程式設計師：您的旅程從 C 基礎知識開始
  2024-10-13 13:53:41
• 使用 PHP 解鎖 Web 開發：初學者指南
  2024-10-12 12:15:51
• 揭秘 C：為新程式設計師提供一條清晰簡單的道路
  2024-10-11 22:47:31
• 釋放您的編碼潛力：絕對初學者的 C 編程
  2024-10-11 19:36:51
• 釋放你內心的程式設計師：C 絕對初學者
  2024-10-11 15:50:41
• 使用 C 自動化您的生活：適合初學者的腳本和工具
  2024-10-11 15:07:41
• PHP 變得簡單：Web 開發的第一步
  2024-10-11 14:21:21
• 使用 Python 建立任何東西：釋放創造力的初學者指南
  2024-10-11 12:59:11
• 編碼的關鍵：為初學者釋放 Python 的力量
  2024-10-11 12:17:31

最新問題

需要一個 jquery 腳本，根據最終用戶的當前選擇從選擇框中移動選定的選項 我有一個HTML頁面，最終用戶可以透過選擇框元素對我們的項目進行排名。請參閱小提琴來觀看簡單的演示：https://jsfiddle.net/Balkanlii/ghecv1j8/...

來自於 2024-04-04 18:40:04

0

1

3528

CSS行類別使某些元素超出框架，而它們應該是靜態的並固定在顯示器底部 目前我的頁面如下所示。添加行類以使兩個元素彼此相鄰後，底部導覽列被向下推到我必須滾動的位置。在這裡，您可以看到另一個沒有行元素的頁面，其中導航連結完美地黏在顯示器的底部（植物和房間...

來自於 2024-04-03 18:48:12

0

1

281

CSS 可以顯示網格線嗎？ 我開始學習CSS的網格佈局。在理想的情況下，我將能夠設置一個div多個網格框，並將我的元素精確地放置在其中，在需要時提供疊加（有點像在Illustrator中使用粘在網格上）。如果...

來自於 2024-03-31 20:38:21

0

2

395

相關專題

更多>

• 全角字什麼意思
• iphone16預計上市時間
• PHP出現亂碼怎麼解決
• linux查看網路卡
• accept函數的用法
• win10藍牙開關不見了怎麼辦
• lightbox.js
• python是前端還是後端

熱門推薦

• js是什麼意思
• js怎麼將字串轉為陣列？
• javascript如何刷新頁面
• js數組怎麼刪除某一項
• sqrt函數怎麼使用

熱門教學

更多>

相關教學

熱門推薦

最新課程

• 
  最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

  1422998
• 
  php入門教程之一週學會PHP

  4268406
• 
  JAVA 初級入門影片教學

  2534174
• 
  小甲魚零基礎入門學習Python影片教學

  507251
• 
  PHP 零基礎入門教學

  862386

• 
  最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

  1422998次學習
• 
  JAVA 初級入門影片教學

  2534174次學習
• 
  小甲魚零基礎入門學習Python影片教學

  507251次學習
• 
  Web前端開發極速入門

  215821次學習
• 
  零基礎精通 PS 影片教學

  889959次學習

• 
  【web前端】Node.js快速入門

  7459次學習
• 
  國外Web開發全端課程全集

  5946次學習
• 
  Go語言實戰之 GraphQL

  4932次學習
• 
  550W粉絲大佬手把手從零學JavaScript

  696次學習
• 
  python大神Mosh，零基礎小白6小時完全入門

  24692次學習

最新下載

更多>

網站特效

網站源碼

網站素材

前端模板

• [表單按鈕] jQuery企業留言表單聯絡程式碼
• [播放器特效] HTML5 MP3音樂盒播放特效
• [選單導航] HTML5酷炫粒子動畫導覽選單特效
• [表單按鈕] jQuery可視化表單拖曳編輯程式碼
• [播放器特效] VUE.JS仿酷狗音樂播放器代碼
• [html5特效] 經典html5推箱子小遊戲
• [圖片特效] jQuery滾動添加或減少圖片特效
• [相簿特效] CSS3個人相簿封面懸停放大特效

• [前端模板] 家居裝潢清潔維修服務公司網站模板
• [前端模板] 清新配色個人求職履歷引導頁模板
• [前端模板] 設計師創意求職履歷網頁模板
• [前端模板] 現代工程建築公司網站模板
• [前端模板] 教育服務機構響應式HTML5模板
• [前端模板] 網上電子書店商城網站模板
• [前端模板] IT技術解決互聯網公司網站模板
• [前端模板] 紫色風格外匯交易服務網站模板

• [PNG素材] 可愛的夏天元素向量素材(EPS+PNG)
• [PNG素材] 四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG)
• [banner圖] 唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS)
• [PNG素材] 金色的畢業帽向量素材(EPS+PNG)
• [PNG素材] 黑白風格的山脈圖示向量素材(EPS+PNG)
• [PNG素材] 不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG)
• [banner圖] 扁平風格的植樹節banner向量素材(AI+EPS)
• [PNG素材] 九種漫畫風格的爆炸聊天氣泡向量素材(EPS+PNG)

• [前端模板] 家居裝潢清潔維修服務公司網站模板
• [前端模板] 清新配色個人求職履歷引導頁模板
• [前端模板] 設計師創意求職履歷網頁模板
• [前端模板] 現代工程建築公司網站模板
• [前端模板] 教育服務機構響應式HTML5模板
• [前端模板] 網上電子書店商城網站模板
• [前端模板] IT技術解決互聯網公司網站模板
• [前端模板] 紫色風格外匯交易服務網站模板