The effect should basically implement the following functions:
(1) The mouse over the link text in the article, to the corresponding pop-up prompt box, the style of the hint box by the CSS to control, highly adaptive; the mouse can click on the link in the Tip box, slide away from the prompt box, the box automatically disappear;
(2) Control the position of the cue box within the scope of the text field, if the link text is on the left side of the text field, the prompt box should be displayed to the right so that it does not leave the text field;
(3) If the Text field content is many, and the link text happens to be at the bottom of the browser, in order to make the hint box out of the browser's visual range, the position of the prompt box to automatically adjust to the link text above;
1.css
Copy Code code as follows:
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
Copy Code code as follows:
Gets the function of the object element;
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 () {
Gets a list of a elements in the text field;
var article= $a ("article", "a")
for (i=0;i<article.length;i++) {
Traversing a element, which does not contain a class "cur", will not execute after the code;
if (Article[i].classname.indexof ("cur") ==-1) continue;
Article[i].onmouseover=function (e) {
Gets the coordinates of the mouse pointer in the viewable area of the browser and is not affected by the document content;
var e=e| | Event
Posx = E.clientx;
Posy = E.clienty;
Gets the height of the viewable area of the browser;
var bodyhe=document.documentelement.clientheight;
var parwidth= $a ("article"). offsetwidth;
var tipbox=get_nextsibling (this);
var boxlist= $a ("article", "span")
Sets the span prompt box in the text area to be hidden;
for (j=0;j<boxlist.length;j++) {
Boxlist[j].style.display= "None";
Boxlist[j].innerhtml= "back into background data"
}
Set the current prompt box display;
tipbox.style.display= "Block";
var w=tipbox.offsetwidth-this.offsetwidth;
/*
A div with ID article adds a relative positioning position:relative, so it is already the parent of the prompt box;
Control the display position of the pop-up box;
*/
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";}
}
}
}
Gets the next label node of the object element;
function get_nextsibling (n) {
var x=n.nextsibling;
while (x.nodetype!=1) {
x=x.nextsibling;
}
return x;
}
Post the source file code interested friends can test, have questions can leave a message @&@
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Prompt Box effect </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>
<body onload= "Tips ();" >
<br/>
<br/>
<br/>
<br/>
<div class= "main" id= "article" >
As early as the Edison Chen "Yan Zhao Door" incident, Chen's father has been a package to raise the mainland male star Hu Bing. The so-called smoke, two people have been photographed together with the media to eat shopping scenes. and <a href= "#" class= "cur" > Hu Bing </a><span><a href= "#" > Shuangxiang cannon Shanghai Boot </a><br/><a "# "> Shuangxiang cannon Shanghai Boot </a><br/><a href=" # "> Shuangxiang cannon Shanghai Boot </a></span> My ambiguous attitude also added a fog to this incident. As early as the Edison Chen "Yan Zhao Door" incident, Chen's father has been a package to raise the mainland male star Hu Bing. The so-called smoke, two people have been photographed together with the media to eat shopping scenes. and <a href= "#" class= "cur" > Hu Bing </a><span><a href= "#" > Shuangxiang cannon Shanghai Boot </a><br/><a "# "> Shuangxiang cannon Shanghai Boot </a><br/><a href=" # "> Shuangxiang cannon Shanghai Boot </a></span> My ambiguous attitude also added a fog to this incident. As early as the Edison Chen "Yan Zhao Door" incident, Chen's father has been a package to raise the mainland male star Hu Bing. The so-called smoke, two people have been photographed together with the media to eat shopping scenes. and <a href= "#" class= "cur" > Hu Bing </a><span><a href= "#" > Shuangxiang cannon Shanghai Boot </a><br/><a "# "> Shuangxiang cannon Shanghai Boot </a><br/><a href=" # "> Shuangxiang cannon Shanghai Boot </a></span> My ambiguous attitude also added a fog to this incident.
</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= "back into background data"
}
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>
