javascript 实用的文字链提示框效果

更新时间：2010年06月30日 15:08:43 作者：

鼠标滑过文章中的链接文字，要在相应位置弹出提示框，提示框的样式由css来控制，高度自适应；鼠标可以点击提示框的中的链接,滑离提示框时，框自动消失

效果要基本实现以下功能：
（1）鼠标滑过文章中的链接文字，要在相应位置弹出提示框，提示框的样式由css来控制，高度自适应；鼠标可以点击提示框的中的链接,滑离提示框时，框自动消失；
（2）把提示框的位置控制在文本域范围之内，如果链接文字处在文本域左侧，提示框要居右显示，使其不会出离文本域；反之，如果链接文字处在文本域右侧，提示框要居左显示；
（3）如果文本域内容很多，而链接文字恰巧处于浏览器底部，为了使提示框不出离于浏览器的可视范围，提示框的位置要自动调整到链接文字的上面；

1.css

复制代码代码如下:

 
.main{width:950px; border:#9C3 1px solid; margin:0 auto; padding:15px; background-color:#fff; line-height:25px;font-size:14px; position:relative;} 
span{border:#70bce4 2px solid; display:block; position:absolute; background-color:#FFF; padding:5px 10px; font-size:12px; width:200px; display:none;} 
.cur{color:#900;} 

2.js

复制代码代码如下:

 
//获取对象元素的函数； 
function $a(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}} 
function tips(){ 
//获取文本域中的a元素列表； 
var article=$a("article","a") 
for(i=0;i<article.length;i++){ 
//遍历a元素，不包含类"cur"的a元素将不会执行之后的代码； 
if(article[i].className.indexOf("cur")==-1) continue; 
article[i].onmouseover=function(e){ 
//获取鼠标指针在浏览器可视区域的坐标，不受文档内容影响； 
var e=e||event; 
posX = e.clientX; 
posY = e.clientY; 
//获取浏览器可视区域高度； 
var bodyhe=document.documentElement.clientHeight; 
var parwidth=$a("article").offsetWidth; 
var tipbox=get_nextSibling(this); 
var boxlist=$a("article","span") 
//设置文本区域中的span提示框均为隐藏状态； 
for(j=0;j<boxlist.length;j++){ 
boxlist[j].style.display="none"; 
boxlist[j].innerHTML="调入后台数据" 
} 
//设置当前的提示框显示； 
tipbox.style.display="block"; 
var w=tipbox.offsetWidth-this.offsetWidth; 
/* 
以id为article的div添加了相对定位position:relative，所以它已经是提示框的父级； 
控制弹出框的显示位置； 
*/ 
tipbox.style.left=(this.offsetLeft>parwidth/2?this.offsetLeft-w:this.offsetLeft)+"px"; 
tipbox.style.top=(posY+tipbox.offsetHeight>bodyhe?this.offsetTop-tipbox.offsetHeight:document.all?this.offsetTop+15:this.offsetTop+this.offsetHeight)+"px"; 
tipbox.onmouseover=function(){this.style.display="block";} 
tipbox.onmouseout=this.onmouseout=function(){tipbox.style.display="none";} 
} 
} 
} 
//获取对象元素的下一个标签节点； 
function get_nextSibling(n){ 
var x=n.nextSibling; 
while (x.nodeType!=1){ 
x=x.nextSibling; 
} 
return x; 
} 

贴出源文件代码感兴趣的朋友可以测试一下，有问题可留言＠＆＠

复制代码代码如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>提示框效果</title> 
<style type="text/css"> 
.main{width:950px; border:#9C3 1px solid; margin:0 auto; padding:15px; background-color:#fff; line-height:25px;font-size:14px; position:relative;} 
span{border:#70bce4 2px solid; display:block; position:absolute; background-color:#FFF; padding:5px 10px; font-size:12px; width:200px; display:none;} 
.cur{color:#900;} 
</style> 
</head> 
<body onload="tips();"> 
<br /> 
<br /> 
<br /> 
<br /> 
<div class="main" id="article"> 
早在陈冠希“艳照门”事件爆发之前，陈冠希老爸就曾被传包养内地男星胡兵。所谓无风不起浪，两人曾被媒体拍到一起吃饭逛街的镜头。而<a href="#" class="cur">胡兵</a><span><a href="#">双响炮上海开机</a><br /><a href="#">双响炮上海开机</a><br /><a href="#">双响炮上海开机</a></span>本人的暧昧态度也为此事件更增添了一份迷雾。早在陈冠希“艳照门”事件爆发之前，陈冠希老爸就曾被传包养内地男星胡兵。所谓无风不起浪，两人曾被媒体拍到一起吃饭逛街的镜头。而<a href="#" class="cur">胡兵</a><span><a href="#">双响炮上海开机</a><br /><a href="#">双响炮上海开机</a><br /><a href="#">双响炮上海开机</a></span>本人的暧昧态度也为此事件更增添了一份迷雾。 早在陈冠希“艳照门”事件爆发之前，陈冠希老爸就曾被传包养内地男星胡兵。所谓无风不起浪，两人曾被媒体拍到一起吃饭逛街的镜头。而<a href="#" class="cur">胡兵</a><span><a href="#">双响炮上海开机</a><br /><a href="#">双响炮上海开机</a><br /><a href="#">双响炮上海开机</a></span>本人的暧昧态度也为此事件更增添了一份迷雾。 
</div> 
<script type="text/javascript"> 
function $a(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}} 
function tips(){ 
var article=$a("article","a") 
for(i=0;i<article.length;i++){ 
if(article[i].className.indexOf("cur")==-1) continue; 
article[i].onmouseover=function(e){ 
var e=e||event; 
posX = e.clientX; 
posY = e.clientY; 
var bodyhe=document.documentElement.clientHeight; 
var parwidth=$a("article").offsetWidth; 
var tipbox=get_nextSibling(this); 
var boxlist=$a("article","span") 
for(j=0;j<boxlist.length;j++){ 
boxlist[j].style.display="none"; 
boxlist[j].innerHTML="调入后台数据" 
} 
tipbox.style.display="block"; 
var w=tipbox.offsetWidth-this.offsetWidth; 
tipbox.style.left=(this.offsetLeft>parwidth/2?this.offsetLeft-w:this.offsetLeft)+"px"; 
tipbox.style.top=(posY+tipbox.offsetHeight>bodyhe?this.offsetTop-tipbox.offsetHeight:document.all?this.offsetTop+15:this.offsetTop+this.offsetHeight)+"px"; 
tipbox.onmouseover=function(){this.style.display="block";} 
tipbox.onmouseout=this.onmouseout=function(){tipbox.style.display="none";} 
} 
} 
} 
function get_nextSibling(n){ 
var x=n.nextSibling; 
while (x.nodeType!=1){ 
x=x.nextSibling; 
} 
return x; 
} 
</script> 
</body> 
</html> 

您可能感兴趣的文章:

javascript 走马灯效果的链接提示
走马灯效果的链接提示，大家的需求不一样，因此可能有朋友会喜欢这样的链接提示，用到的话，再好好美化一下，其实效果还是不错的。
2009-10-10
Javascript 仿歌词智能滚动代码
为什么说它是智能滚动呢？因为如果我们在布局网页的时候，预留的滚动区域太小的话，有可能文字会有一部分看不到，本款代码可以智能判断区域大小，如果不够显示文字，那么它会控制文字做相应的左右滚动.
2009-10-10
javascript 实用的文字链提示框效果
鼠标滑过文章中的链接文字，要在相应位置弹出提示框，提示框的样式由css来控制，高度自适应；鼠标可以点击提示框的中的链接,滑离提示框时，框自动消失
2010-06-06
Js 打字效果逐一出现的文字
JavaScript特效，逐个出现的文字，像打字的效果差不多。
2009-10-10
颜色变换像字符逐字输入的欢迎词
一个炫彩的网页欢迎词，其实就是Javascript文字特效，只不过它是打字与炫彩的结合，在网页的一角放上这效果，给平静的网页增添点动态元素。
2009-10-10
javascript 打字效果的文字特效
文字如何实现打字的效果呢?在浏览网页的时候也经常能看到这种效果。本节给出了一个打字效果的文字特效，文字一个一个地打印在页面上。
2011-01-01
Js+CSS实现的间断和不间断文本滚动代码
Js+CSS间断和不间断文本滚动代码，文字在一行高度范围内不间断滚动，还有一个是间断滚动，滚动一次后会稍停片刻再次滚动。
2010-10-10
JS溶解形式的文字切换特效
JavaScript形成溶解过渡形式的文字切换特效，够酷吧，的你平静如水的网页上旋转这么一个文字特效，一定会吸引不少人的注意力，文字内容和颜色以及字号大小看看代码就会知道怎么改了。
2009-11-11
文字在网页上下浮动学习可以不建议用
JavaScript控制文字像跳跳球一样在网页上浮动，碰到边缘自动回来，有兴趣看一下。
2009-11-11
Javascript 小写字母依次变为大写
Javascript把小写字母依次变为大写，严格来说不算是大小写转换程序，它主要是把文字按一定顺序依次变为小写的，估计有人要用到吧。
2009-10-10