The effect must basically implement the following functions:
(1) The mouse slides through the link text in the article, and a prompt box should be popped up at the corresponding position. The style of the prompt box is controlled by CSS and is highly adaptable. The mouse can click on the link in the prompt box. When it slides away from the prompt box, the box will automatically disappear;
(2) Control the position of the prompt box within the text field range. If the link text is on the left side of the text field, the prompt box should be displayed on the right side so that it will not leave the text field; on the contrary, if the link text is on the right side of the text field, the prompt box should be displayed on the left side;
(3) If the text field has a lot of content and the link text happens to be at the bottom of the browser, in order to prevent the prompt box from leaving the browser's visual range, the position of the prompt box should be automatically adjusted to the top of the link text;
.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;}
//Get the function of object elements;
function $a(id,tag){var re=(id&&typeof id!="string")?id:(id);if(!tag){return re;}else{return (tag);}}
function tips(){
//Get the list of a elements in the text field;
var article=$a("article","a")
for(i=0;i<;i++){
//Transfer through element a, element a that does not contain class "cur" will not execute the subsequent code;
if(article[i].("cur")==-1) continue;
article[i].onmouseover=function(e){
//Get the coordinates of the mouse pointer in the browser's visible area, and are not affected by the document content;
var e=e||event;
posX = ;
posY = ;
//Get the browser's visible area height;
var bodyhe=;
var parwidth=$a("article").offsetWidth;
var tipbox=get_nextSibling(this);
var boxlist=$a("article","span")
//Set the span prompt boxes in the text area to be hidden;
for(j=0;j<;j++){
boxlist[j].="none";
boxlist[j].innerHTML="Click backend data"
}
//Set the current prompt box to display;
="block";
var w=;
/*
The div with id as article adds relative position:relative, so it is already the parent of the prompt box;
Controls the display position of the pop-up box;
*/
=(>parwidth/2?-w:)+"px";
=(posY+>bodyhe?:?+15:+)+"px";
=function(){="block";}
==function(){="none";}
}
}
}
//Get the next tag node of the object element;
function get_nextSibling(n){
var x=;
while (!=1){
x=;
}
return x;
}
Post source file code. Interested friends can test it. If you have any questions, please leave a message ＠&＠
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<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>
</head>
<body onload="tips();">
<br />
<br />
<br />
<br />
<div class="main" >
My ambiguous attitude also adds a fog to this incident.
</div>
<script type="text/javascript">
function $a(id,tag){var re=(id&&typeof id!="string")?id:(id);if(!tag){return re;}else{return (tag);}}
function tips(){
var article=$a("article","a")
for(i=0;i<;i++){
if(article[i].("cur")==-1) continue;
article[i].onmouseover=function(e){
var e=e||event;
posX = ;
posY = ;
var bodyhe=;
var parwidth=$a("article").offsetWidth;
var tipbox=get_nextSibling(this);
var boxlist=$a("article","span")
for(j=0;j<;j++){
boxlist[j].="none";
boxlist[j].innerHTML="Click backend data"
}
="block";
var w=;
=(>parwidth/2?-w:)+"px";
=(posY+>bodyhe?:?+15:+)+"px";
=function(){="block";}
==function(){="none";}
}
}
}
function get_nextSibling(n){
var x=;
while (!=1){
x=;
}
return x;
}
</script>
</body>
</html>