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; 
} 

復(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ì)于瀏覽器頁(yè)面（或客戶區(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ù)說(shuō)明 
* elem==>需要淡入的元素 
* speed==>淡入速度,正整數(shù)(可選) 
* opacity==>淡入到指定的透明度,0~100(可選) 
*/ 
speed = speed || 20; 
opacity = opacity || 100; 
//顯示元素,并將元素值為0透明度(不可見(jiàn)) 
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ù)說(shuō)明 
* 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> 