脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 网页特效 → 文字特效 → 文字链提示框

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

 更新时间：2010年06月30日 15:08:43   投稿：mdxy-dxy  
鼠标滑过文章中的链接文字，要在相应位置弹出提示框，提示框的样式由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">
本人的暧昧态度也为此事件更增添了一份迷雾。
</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 点击插入文字

    JavaScript 点击插入文字

    JavaScript点击插入文字，在一段文字的任意处点击，会将你时先准备好的文字插入到一段文字中，可能大家不怎么用到，不过感觉很奥妙，希望高手改进成自己想要的效果。
    2009-10-10
  • 简介内容超出部分文字隐藏省略的特效(可显示)

    简介内容超出部分文字隐藏省略的特效(可显示)

    如果字数找过特定的字符数，那么超过这个字符数后的文字就显示省略号... 然后出现【展开】或省略号，点击之后就出现全部内容
    2011-10-10
  • javascript 洒脱飘动的文字

    javascript 洒脱飘动的文字

    飘动的文字，看着还挺自在、洒脱，网上经常见的东西，原来是这么实现的，奉献给大家哦。
    2009-10-10
  • javascript上下左右定时滚动插件

    javascript上下左右定时滚动插件

    在网上找到的，我认为最为方便的一段定时滚动代码，找了很多其他的总是有这样那样的问题，好不容易找到的，就分享一下。
    2010-06-06
  • JS CSS制作饱含热情的镶边文字闪烁特效

    JS CSS制作饱含热情的镶边文字闪烁特效

    JS+CSS制作的文字闪烁特效，饱含热情的镶边文字，能让人感觉到你的热情，同时也可以用作提示语，能充分引起人们的关注。
    2009-10-10
  • 文字来回上下移动或跳动的代码

    文字来回上下移动或跳动的代码

    JavaScript实现文字 上下跳动，或上下移动，比较普通的效果，类似QQ聊天窗口抖动一样的效果，只不过这里是图片而已。
    2009-11-11
  • Js制作点击输入框时默认文字消失的效果

    Js制作点击输入框时默认文字消失的效果

    为了提高用户体验和易用度，一些设计师会对网页中用户经常用的东西进行优化，比如输入框。一般的输入框是怎样优化的呢？从用户体验的角度出发，简化用户使用步骤，让用户用得更方便就是提高了易用性
    2015-09-09
  • Js+CSS 文字渐隐渐现显示

    Js+CSS 文字渐隐渐现显示

    JavaScript文字渐隐渐现显示，更专业的说法叫淡入淡出，最开始用于视频蒙太奇制作及Flash动画上，现在用到文字上也不是什么稀罕事了.
    2009-10-10
  • 仿打字特效的JS逐字出现的信息文字

    仿打字特效的JS逐字出现的信息文字

    JavaScript编写的文字特效，看似打字的效果，让文字逐个出现，你可以以这个为基础给你心爱的人写一段祝福的语，这的确挺合适。
    2009-10-10
  • JavaScript 仿歌词效果

    JavaScript 仿歌词效果

    这是一个文字叠加滚动效果，当然离不开JavaScript了，看上去像MTV的歌词效果，用两种颜色的文字叠加形成的效果，用Js去控制时间和颜色，这个当然你可以自己修改噢！
    2009-10-10

最新评论