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

178 阅读 0 评论 118 点赞

我是靠谱客的博主碧蓝小蘑菇，最近开发中收集的这篇文章主要介绍javascript 实用的文字链提示框效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果要基本实现以下功能：
（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> 