Js prompt information jtip encapsulate code, which can be images or articles

That is to say, I made a front-end job, so every day it's about div + css. Today, let's talk about how to use js to implement the title or alt function similar to that in tag A. What are the advantages of this function, first, the title or alt attribute prompts are too simple, and the style cannot be modified. You need to move the mouse over the element and wait 1 to 3 seconds until it is displayed, the content also contains only simple text, so html content cannot be added. Therefore, in summary, we had to encapsulate a js prompt box of our own. Maybe you will say that jquery does not have a jtip component? Yes, it means that your thinking is quite cutting-edge. If you are used to it, use it. Who is not used? I just came up with this small example for your research.

First, we need to clarify our thinking and do everything like this. Instead of writing code as soon as we get something, we need to first think about what we want and then pay for it. This is like falling in love. You cannot always think about getting the other party, rather than trying to pay for it. What we need to get is a brand new prompt box, which can be very simple or complicated. It should be able to cover all kinds of Haina baichuan, which is easy to think of div. Then I want my mouse to appear near a label in time and disappear when I move it away. It's that simple. Now the idea is clear, isn't it that easy. Well, you can teach me everything! Since the idea is clear, follow this idea step by step.

Create a DIV first, hide it, and add all the styles you want. The Code is as follows:


Copy codeThe Code is as follows:
Var tipdiv = document. createElement ("div ");
Tipdiv. id = "txbtip ";
Tipdiv. style. position = "absolute ";
Tipdiv. style. padding = "3px ";
Tipdiv. style. background = "#565656 ";
Tipdiv. style. zindexes = "999 ";
Tipdiv. style. border = "1px solid #000 ";
Tipdiv. style. background = "# F4F8FC ";
Tipdiv. style. fontsize = "14px ";
Var rootEle = document. body | document.doc umentElement;
RootEle. appendChild (tipdiv );

The onmousemove event and onmouseout event are added to the tag to be added. To make the tag more public, I will add a common class name (txbtip) to all the tags to be added ).

Copy codeThe Code is as follows:
Var txbtip = getElementsByClassName ('txbtip ', 'input');>
Function getElementsByClassName (n, tag ){
Tag = tag | "*";
Var classElements = [], allElements = document. getElementsByTagName (tag );
For (var I = 0; I <allElements. length; I ++ ){
N = "" + n + "";
Var cn = "" + allElements [I]. className + "";
If (cn. indexOf (n )! =-1 ){
ClassElements [classElements. length] = allElements [I];
}
}
Return classElements;
}

Note: This method obtains the set of class n for some labels.
Copy codeThe Code is as follows:
For (var tip in txbtip ){
Var temp = "";
Txbtip [tip]. onmouseover = function (e ){
Tipdiv. style. display = "block ";
Var title = this. title;
Temp = this. title;
This. title = ""; // The reason for this is to clear the original title prompt.
Tipdiv. innerHTML = title;
SetTipPosition (e); // This method is positioned in the prompt box.
}
Txbtip [tip]. onmousemove = function (e ){
SetTipPosition (e); // This method is positioned in the prompt box.
}
Txbtip [tip]. onmouseout = function (e ){
// Alert ("out ");
This. title = temp;
Temp = "";
Tipdiv. style. display = "none ";
}



Finally, the tag is located, which is the setTipPotion method shown above. Its implementation is as follows:
Copy codeThe Code is as follows:
Function setTipPosition (e ){
E = e | event;
Tipdiv. style. left = e. clientX + 10 + 'px ';
Var top = document. body. scrollTop? Document. body. scrollTop: document.doc umentElement. scrollTop;
Tipdiv. style. top = e. clientY + 10 + top + 'px ';
}

This is almost done, and then we will reverse it and combine it with page binding. Therefore, write it into window. onload.

Window. onload = function (){...}
However, in this case, a page may have multiple window. onload events leading to failure, so add some work. In addition, the corresponding tag of the prompt box may already have a mouse event, and you must add a judgment.

If (window. addEventListener) {window. addEventListener ("load", ready, false);} else if (window. attachEvent) {window. attachEvent ("onload", ready );}
The complete code is as follows:
Jstip. js
[Code]

// ****** Js text prompt txb20100119 ********/

If (window. addEventListener ){
Window. addEventListener ("load", ready, false );
} Else if (window. attachEvent ){
Window. attachEvent ("onload", ready );
}

Function ready (){
Var txbtip = getElementsByClassName ('txbtip ','*');
Var tipdiv = document. createElement ("div ");
Tipdiv. id = "txbtip ";
Tipdiv. style. position = "absolute ";
Tipdiv. style. padding = "3px ";
Tipdiv. style. background = "#565656 ";
Tipdiv. style. zindexes = "999 ";
Tipdiv. style. border = "1px solid #000 ";
Tipdiv. style. background = "# F4F8FC ";
Tipdiv. style. fontsize = "14px ";
Tipdiv. style. display = "none ";
Var rootEle = document. body | document.doc umentElement;
RootEle. appendChild (tipdiv );
For (var tip in txbtip ){
// Alert (txbtip [tip]. id );
Var temp = "";
Txbtip [tip]. onmouseover = function (e ){
Tipdiv. style. display = "block ";
Var title = this. title;
Temp = this. title;
This. title = "";
Tipdiv. innerHTML = title;
SetTipPosition (e );
// Alert (title );
}
Txbtip [tip]. onmousemove = function (e ){
SetTipPosition (e );
}
Txbtip [tip]. onmouseout = function (e ){
// Alert ("out ");
This. title = temp;
Temp = "";
Tipdiv. style. display = "none ";
}
}


Function getElementsByClassName (n, tag ){
Tag = tag | "*";
Var classElements = [], allElements = document. getElementsByTagName (tag );
For (var I = 0; I <allElements. length; I ++ ){
N = "" + n + "";
Var cn = "" + allElements [I]. className + "";
If (cn. indexOf (n )! =-1 ){
ClassElements [classElements. length] = allElements [I];
}
}
Return classElements;
}
Function setTipPosition (e ){
E = e | event;
Tipdiv. style. left = e. clientX + 10 + 'px ';
Var top = document. body. scrollTop? Document. body. scrollTop: document.doc umentElement. scrollTop;
Tipdiv. style. top = e. clientY + 10 + top + 'px ';
}
}
[Code]
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> example of encapsulating your own js prompt information jtip </title> <meta http-equiv =" Content-Type "content =" text/html; charset = gb2312 "/> <meta http-equiv =" Content-Language "content =" zh-cn "/ > <Meta name = "robots" content = "all"/> <meta name = "author" content = "Tian xiangbing"/> <meta name = "Copyright" content = "Copyright lovewebgames.com All Rights Reserved. "/> <meta name =" MSSmartTagsPreventParsing "content =" true "/> <meta http-equiv =" imagetoolbar "content =" false "/> </pead> <body> this is a hyperlink </p> <input type = "button" value = "I Am a button" class = "txbtip" title = "don't click me, I won't care about you either. If you don't believe it, try it! "/> </P> <p>"> other labels can also be used. </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]