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


Posted in Javascript onJune 30, 2010

效果要基本实现以下功能:
(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 相关文章推荐
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
一个简单的js鼠标划过切换效果
Jun 30 #Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 #Javascript
Jquery AJAX 用于计算点击率(统计)
Jun 30 #Javascript
基于jquery的图片懒加载js
Jun 30 #Javascript
CSS和Javascript简单复习资料
Jun 29 #Javascript
javascript与CSS复习(三)
Jun 29 #Javascript
javascript与CSS复习(二)
Jun 29 #Javascript
You might like
日本十大惊悚动漫
2020/03/04 日漫
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
allbeauty美国:英国在线美容店
2019/03/11 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
经济贸易系求职信
2014/08/04 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
暂停营业通知
2015/04/25 职场文书
行政答辩状范文
2015/05/21 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书