JS+CSS實(shí)現(xiàn)一個(gè)氣泡提示框
更新時(shí)間：2013年08月18日 16:37:04 作者：
氣泡提示框牽扯到的技術(shù)有：JS響應(yīng)鼠標(biāo)的事件、純CSS制作三角形，附截圖及示例代碼，感興趣的朋友可以參考下
分享一個(gè)氣泡提示框，練習(xí)的技術(shù)有：（1）JS響應(yīng)鼠標(biāo)的事件；（2）純CSS制作三角形。
效果這樣：
這是html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>氣泡對(duì)話框</title>
<script src="myBubbleTooltip.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<style type="text/css">
h1{
font-size: 60px;
margin-top: 0;
font-family: Arial, sans-serif;
text-shadow: 2px 0px 10px #292929;
letter-spacing: 0px;
text-decoration: none;
color: #DDDDDD;
}
div#left{
border: 1px solid #CCCCCC;
width: 200px;
height: 300px;
background-color: #EEEEEE;
float: left;
margin: 0 0 0 20px;
}
div#content{
border: 1px solid #CCCCCC;
width: 600px;
height: 300px;
background-color: #EEEEEE;
float: left;
margin: 0px 20px;
}
div#editor{
border: 1px solid #CCCCCC;
float: left;
width: 300px;
height: 300px;
}
div#test{
border: 2px solid #cccccc;
width: 400px;
height: 400px;
}
.bubble_tooltip_common{
z-index: 1;
color:#333333;
width:150px;
position:absolute;
display:none;
border: 1px solid #AAAAAA;
box-shadow: 0px 0px 10px #AAAAAA;
border-radius: 5px;
padding: 5px 10px;
background-color: #FEFAB8;
}
/*尖端指向左側(cè)的三角形，外緣*/
.triRight{
z-index: 2;
border: 10px solid #AAAAAA;
border-color: transparent #AAAAAA transparent transparent;
width: 0;
height: 0;
position: absolute;
left:-20px;
top: 5px;
}
<PRE class=html name="code">/*尖端指向左側(cè)的三角形，內(nèi)部，*/</PRE>.triRightInner{ z-index: 3; border: 8px solid #FEFAB8; border-color: transparent #FEFAB8 transparent transparent;<SPAN style="FONT-FAMILY: Arial, Helvetica, sans-serif">/*顏色應(yīng)與提示框的background-color一致*/</SPAN><BR>
width: 0; height: 0; position: absolute; left:-16px; top:7px;}</style></head><body> <div class="bubble_tooltip_common" id="bubble_tooltip"> <label class="triRight"></label> <label class="triRightInner"></label> <span id="bubble_tooltip_content"></span> </div>
<h1>氣泡對(duì)話框</h1> <div id="left"> <p> <span onmouseover="showToolTip(event,'這是一個(gè)提示框。')" onmouseout="hideToolTip()">鼠標(biāo)放于此處，會(huì)彈出一個(gè)氣泡對(duì)話框。</span></p> </div> <div id="content"> <p><a href="#" onmouseover="showToolTip(event,'This is the content of the tooltip.')" onmouseout="hideToolTip()">sharejs.com</a></p>
</div> <div id="editor" contenteditable> [Click to edit.] </div></body></html>
<PRE></PRE>
<P></P>
<P><SPAN style="FONT-FAMILY: Microsoft YaHei; FONT-SIZE: 18px"><STRONG>這是JavaScript代碼：</STRONG></SPAN></P>
<P></P>
<PRE class=javascript name="code">function showToolTip(e,text){
if(document.all)e = event;
var obj = document.getElementById('bubble_tooltip');
var obj2 = document.getElementById('bubble_tooltip_content');
obj2.innerHTML = text;
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
var leftPos = e.clientX + 20; //clientX 事件屬性返回當(dāng)事件被觸發(fā)時(shí)鼠標(biāo)指針相對(duì)于瀏覽器頁面（或客戶區(qū)）的水平坐標(biāo)
if(leftPos<0)leftPos = 0;
obj.style.left = leftPos + 'px';
obj.style.top = e.clientY + st + 'px';
obj.style.display = 'block';
fadeIn(obj,5,100);
}
function hideToolTip()
{
var obj = document.getElementById('bubble_tooltip');
//obj.style.display = 'none';
fadeOut(obj,5,0);
}
//設(shè)置元素透明度,透明度值按IE規(guī)則計(jì),即0~100
function SetOpacity(ev, v){
ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
}
//淡入效果(含淡入到指定透明度)
function fadeIn(elem, speed, opacity){
/*
* 參數(shù)說明
* elem==>需要淡入的元素
* speed==>淡入速度,正整數(shù)(可選)
* opacity==>淡入到指定的透明度,0~100(可選)
*/
speed = speed || 20;
opacity = opacity || 100;
//顯示元素,并將元素值為0透明度(不可見)
elem.style.display = 'block';
SetOpacity(elem, 0);
//初始化透明度變化值為0
var val = 0;
//循環(huán)將透明值以2遞增,即淡入效果
(function(){
SetOpacity(elem, val);
val += 5;
if (val <= opacity) {
setTimeout(arguments.callee, speed)
}
})();
}
//淡出效果(含淡出到指定透明度)
function fadeOut(elem, speed, opacity){
/*
* 參數(shù)說明
* elem==>需要淡入的元素
* speed==>淡入速度,正整數(shù)(可選)
* opacity==>淡入到指定的透明度,0~100(可選)
*/
speed = speed || 20;
opacity = opacity || 0;
//初始化透明度變化值為0
var val = 100;
//循環(huán)將透明值以5遞減,即淡出效果
(function(){
SetOpacity(elem, val);
val -= 5;
if (val >= opacity) {
setTimeout(arguments.callee, speed);
}else if (val < 0) {
//元素透明度為0后隱藏元素
elem.style.display = 'none';
}
})();
}</PRE><BR>
<BR>
<P></P>
<PRE></PRE>
效果這樣：
這是html：
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>氣泡對(duì)話框</title>
<script src="myBubbleTooltip.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<style type="text/css">
h1{
font-size: 60px;
margin-top: 0;
font-family: Arial, sans-serif;
text-shadow: 2px 0px 10px #292929;
letter-spacing: 0px;
text-decoration: none;
color: #DDDDDD;
}
div#left{
border: 1px solid #CCCCCC;
width: 200px;
height: 300px;
background-color: #EEEEEE;
float: left;
margin: 0 0 0 20px;
}
div#content{
border: 1px solid #CCCCCC;
width: 600px;
height: 300px;
background-color: #EEEEEE;
float: left;
margin: 0px 20px;
}
div#editor{
border: 1px solid #CCCCCC;
float: left;
width: 300px;
height: 300px;
}
div#test{
border: 2px solid #cccccc;
width: 400px;
height: 400px;
}
.bubble_tooltip_common{
z-index: 1;
color:#333333;
width:150px;
position:absolute;
display:none;
border: 1px solid #AAAAAA;
box-shadow: 0px 0px 10px #AAAAAA;
border-radius: 5px;
padding: 5px 10px;
background-color: #FEFAB8;
}
復(fù)制代碼 代碼如下:
/*尖端指向左側(cè)的三角形，外緣*/
.triRight{
z-index: 2;
border: 10px solid #AAAAAA;
border-color: transparent #AAAAAA transparent transparent;
width: 0;
height: 0;
position: absolute;
left:-20px;
top: 5px;
}
復(fù)制代碼 代碼如下:
<PRE class=html name="code">/*尖端指向左側(cè)的三角形，內(nèi)部，*/</PRE>.triRightInner{ z-index: 3; border: 8px solid #FEFAB8; border-color: transparent #FEFAB8 transparent transparent;<SPAN style="FONT-FAMILY: Arial, Helvetica, sans-serif">/*顏色應(yīng)與提示框的background-color一致*/</SPAN><BR>
width: 0; height: 0; position: absolute; left:-16px; top:7px;}</style></head><body> <div class="bubble_tooltip_common" id="bubble_tooltip"> <label class="triRight"></label> <label class="triRightInner"></label> <span id="bubble_tooltip_content"></span> </div>
<h1>氣泡對(duì)話框</h1> <div id="left"> <p> <span onmouseover="showToolTip(event,'這是一個(gè)提示框。')" onmouseout="hideToolTip()">鼠標(biāo)放于此處，會(huì)彈出一個(gè)氣泡對(duì)話框。</span></p> </div> <div id="content"> <p><a href="#" onmouseover="showToolTip(event,'This is the content of the tooltip.')" onmouseout="hideToolTip()">sharejs.com</a></p>
</div> <div id="editor" contenteditable> [Click to edit.] </div></body></html>
<PRE></PRE>
<P></P>
<P><SPAN style="FONT-FAMILY: Microsoft YaHei; FONT-SIZE: 18px"><STRONG>這是JavaScript代碼：</STRONG></SPAN></P>
<P></P>
<PRE class=javascript name="code">function showToolTip(e,text){
if(document.all)e = event;
var obj = document.getElementById('bubble_tooltip');
var obj2 = document.getElementById('bubble_tooltip_content');
obj2.innerHTML = text;
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
var leftPos = e.clientX + 20; //clientX 事件屬性返回當(dāng)事件被觸發(fā)時(shí)鼠標(biāo)指針相對(duì)于瀏覽器頁面（或客戶區(qū)）的水平坐標(biāo)
if(leftPos<0)leftPos = 0;
obj.style.left = leftPos + 'px';
obj.style.top = e.clientY + st + 'px';
obj.style.display = 'block';
fadeIn(obj,5,100);
}
function hideToolTip()
{
var obj = document.getElementById('bubble_tooltip');
//obj.style.display = 'none';
fadeOut(obj,5,0);
}
//設(shè)置元素透明度,透明度值按IE規(guī)則計(jì),即0~100
function SetOpacity(ev, v){
ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
}
//淡入效果(含淡入到指定透明度)
function fadeIn(elem, speed, opacity){
/*
* 參數(shù)說明
* elem==>需要淡入的元素
* speed==>淡入速度,正整數(shù)(可選)
* opacity==>淡入到指定的透明度,0~100(可選)
*/
speed = speed || 20;
opacity = opacity || 100;
//顯示元素,并將元素值為0透明度(不可見)
elem.style.display = 'block';
SetOpacity(elem, 0);
//初始化透明度變化值為0
var val = 0;
//循環(huán)將透明值以2遞增,即淡入效果
(function(){
SetOpacity(elem, val);
val += 5;
if (val <= opacity) {
setTimeout(arguments.callee, speed)
}
})();
}
//淡出效果(含淡出到指定透明度)
function fadeOut(elem, speed, opacity){
/*
* 參數(shù)說明
* elem==>需要淡入的元素
* speed==>淡入速度,正整數(shù)(可選)
* opacity==>淡入到指定的透明度,0~100(可選)
*/
speed = speed || 20;
opacity = opacity || 0;
//初始化透明度變化值為0
var val = 100;
//循環(huán)將透明值以5遞減,即淡出效果
(function(){
SetOpacity(elem, val);
val -= 5;
if (val >= opacity) {
setTimeout(arguments.callee, speed);
}else if (val < 0) {
//元素透明度為0后隱藏元素
elem.style.display = 'none';
}
})();
}</PRE><BR>
<BR>
<P></P>
<PRE></PRE>
您可能感興趣的文章:
- JS組件Bootstrap實(shí)現(xiàn)彈出框和提示框效果代碼
- JS仿百度搜索自動(dòng)提示框匹配查詢功能
- JavaScript中通過提示框跳轉(zhuǎn)頁面的方法
- js彈出框、對(duì)話框、提示框、彈窗實(shí)現(xiàn)方法總結(jié)(推薦)
- JavaScript基礎(chǔ)教程之a(chǎn)lert彈出提示框?qū)嵗?/a>
- PHP 實(shí)現(xiàn)類似js中alert() 提示框
- 修改js confirm alert 提示框文字的簡(jiǎn)單實(shí)例
- JS實(shí)現(xiàn)關(guān)閉當(dāng)前頁而不彈出提示框的方法
- JS實(shí)時(shí)彈出新消息提示框并有提示音響起的實(shí)現(xiàn)代碼
- 原生js實(shí)現(xiàn)自定義消息提示框
相關(guān)文章
從我寫的as tween改寫的，基本功能跟as里面寫的一樣，只是沒有擴(kuò)展特定功能的接口（比如alpha2，move2，size2，color2等接口,這些在as tween里面都有實(shí)現(xiàn)）。2008-12-12
js或jquery實(shí)現(xiàn)頁面打印可局部打印
這篇文章主要介紹了js或jquery如何實(shí)現(xiàn)頁面打印也可局部打印,需要的朋友可以參考下2014-03-03
與直接使用Promise相比，使用async/await不僅可以使代碼更具可讀性，而且還可以在JavaScript引擎中實(shí)現(xiàn)一些有趣的優(yōu)化。這篇文章是關(guān)于一個(gè)這樣的優(yōu)化，涉及異步代碼的堆棧追蹤。2021-04-04
全選反選checkbox在實(shí)際應(yīng)用中比較常見，本文有個(gè)不錯(cuò)的示例，大家可以參考下2014-03-03
js實(shí)現(xiàn)網(wǎng)頁多級(jí)級(jí)聯(lián)菜單代碼
這篇文章主要介紹了js實(shí)現(xiàn)網(wǎng)頁多級(jí)級(jí)聯(lián)菜單代碼,涉及javascript基于數(shù)組動(dòng)態(tài)構(gòu)造多級(jí)級(jí)聯(lián)菜單的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
今天看了一個(gè)函數(shù)，功能是把形如word-word的字符串轉(zhuǎn)化為wordWord2010-03-03
Javascript處理DOM元素事件實(shí)現(xiàn)代碼
DOM元素都有一些標(biāo)準(zhǔn)事件，一般使用時(shí)只要使用onclick=function的方式就可以了，但是當(dāng)需要為DOM元素添加多個(gè)事件，刪除事件，或在用Javascript封裝控件的時(shí)候，為封裝的控件添加自定義事件的時(shí)候2012-05-05
javascript 窗口加載蒙板 內(nèi)嵌網(wǎng)頁內(nèi)容
用于在現(xiàn)有窗口上加載蒙板，在蒙板內(nèi)在嵌入其他頁面內(nèi)容2010-11-11
ECharts 是一個(gè)使用JavaScript實(shí)現(xiàn)的開源可視化庫(kù)，涵蓋各行業(yè)圖表，滿足各種需求。這篇文章介紹了ECharts的基礎(chǔ)知識(shí)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)分享到朋友圈功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07