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 相关文章推荐
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
JS与C#编码解码
Dec 03 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
jquery分页对象使用示例
Apr 01 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
javascript对象的相关操作小结
May 16 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 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
php中socket的用法详解
2014/10/24 PHP
php xhprof使用实例详解
2019/04/15 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
python 处理string到hex脚本的方法
2018/10/26 Python
python实现PID算法及测试的例子
2019/08/08 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
物业管理专业个人的自我评价
2013/11/19 职场文书
环境科学专业个人求职的自我评价
2013/11/28 职场文书
表扬信格式
2014/01/12 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
安全施工标语
2014/06/07 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
机关作风建设整改方案
2014/10/27 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
2015年暑假工作总结
2015/07/13 职场文书
javascript函数式编程基础
2021/09/15 Javascript