Home > Developer > JavaScript
The following functions must be implemented:
(1) move the mouse over the link text in the article. A prompt box is displayed at the corresponding position. The style of the prompt box is controlled by css and the height is adaptive. You can click the link in the prompt box, the dialog box disappears automatically when it is moved to the prompt box;
(2) Place the prompt box within the text field range. If the link text is on the left side of the text field, the prompt box will be displayed on the right so that it will not leave the text field. Otherwise, if the link text is on the right side of the text field, the prompt box is displayed on the left;
(3) If there are many text fields and the link text happens to be at the bottom of the browser, in order to make the prompt box out of the visible range of the browser, the position of the prompt box should be automatically adjusted to the link text;
1. css
Copy codeThe Code is 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 codeThe Code is as follows:
// Obtain functions of object elements;
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 (){
// Obtain the list of a elements in the text field;
Var article = $ a ("article", "")
For (I = 0; I <article. length; I ++ ){
// Traverses Element a. Element a without the "cur" class will not execute the subsequent code;
If (article [I]. className. indexOf ("cur") =-1) continue;
Article [I]. onmouseover = function (e ){
// Obtain the coordinates of the mouse pointer in the visible area of the browser, which is not affected by the document content;
Var e = e | event;
PosX = e. clientX;
PosY = e. clientY;
// Obtain the height of the visible area of the browser;
Var bodyhew.document.doc umentElement. clientHeight;
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 hidden;
For (j = 0; j <boxlist. length; j ++ ){
Boxlist [j]. style. display = "none ";
Boxlist [j]. innerHTML = "transfer to background data"
}
// Set the display of the current prompt box;
Tipbox. style. display = "block ";
Var w = tipbox. offsetWidth-this.offsetWidth;
/*
The div with the id as article adds the relative position: relative, so it is already the parent level of the prompt box;
Controls 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 ";}
}
}
}
// Obtain the next tag node of an object element;
Function get_nextSibling (n ){
Var x = n. nextSibling;
While (x. nodeType! = 1 ){
X = x. nextSibling;
}
Return x;
}
If you are interested in the source file code, you can test it. If you have any questions, leave a message @&@
Copy codeThe Code is as follows:
<! 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> 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" id = "article">
As early as the outbreak of Edison Chen's "yanzhaomen" incident, Edison Chen's father was once included in the family of Mainland male Hu Bing. The so-called wind and waves, the two were shot by the media for dinner and shopping. <A href = "#" class = "cur"> Hu Bing </a> <span> <a href = "#"> Shanghai dual-fire gun </a> <br/> <a href = "#"> trigger a trigger in Shanghai </a> <br/> <a href = "#"> trigger a trigger in Shanghai </a> </span> myself the ambiguous attitude also adds a fog to this incident. As early as the outbreak of Edison Chen's "yanzhaomen" incident, Edison Chen's father was once included in the family of Mainland male Hu Bing. The so-called wind and waves, the two were shot by the media for dinner and shopping. <A href = "#" class = "cur"> Hu Bing </a> <span> <a href = "#"> Shanghai dual-fire gun </a> <br/> <a href = "#"> trigger a trigger in Shanghai </a> <br/> <a href = "#"> trigger a trigger in Shanghai </a> </span> myself the ambiguous attitude also adds a fog to this incident. As early as the outbreak of Edison Chen's "yanzhaomen" incident, Edison Chen's father was once included in the family of Mainland male Hu Bing. The so-called wind and waves, the two were shot by the media for dinner and shopping. <A href = "#" class = "cur"> Hu Bing </a> <span> <a href = "#"> Shanghai dual-fire gun </a> <br/> <a href = "#"> trigger a trigger in Shanghai </a> <br/> <a href = "#"> trigger a trigger in Shanghai </a> </span> myself the 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: document. getElementById (id); if (! Tag) {return re;} else {return re. getElementsByTagName (tag );}}
Function tips (){
Var article = $ a ("article", "")
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 bodyhew.document.doc umentElement. 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 = "transfer to 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>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
