js prompt information jtip encapsulation code, which can be a picture or article_javascript skills

By the way, I changed my career to front-end, so I do some div css and the like every day. Today I will talk about using js to implement a title or alt function similar to the A tag. As for the benefits of this function, please listen to me slowly. First of all, the prompts brought by the title or alt attributes are too simple, and the style It cannot be modified, and you have to move the mouse over the element and wait for 1 to 3 seconds before it is displayed. The content is only simple text, and html content cannot be added. So, to sum up, I have to encapsulate a js prompt box of my own. Maybe you will say, doesn’t jquery have a jtip component? Yes, that means your thinking is quite avant-garde. If you're used to it, then use it. Who wouldn't use it anyway? I just gave this small example for everyone to study.

First of all, what we have to do is to clarify our thinking. This should be the case in everything we do. Don’t start writing code as soon as we get something. We must first think about what we want to get, and then pay for it. This is just like falling in love. You can't always think about getting the other person without thinking of ways to give. Well, it's a bit far-fetched. What we want to get is a brand new prompt box. It can be very simple or very complex. It should be able to cover everything, which is easy to think of div. Then I also hope that when my mouse moves to a certain label, it will appear near the mouse in time and disappear when it moves away. It's that simple. Now that my thinking is clear, don't you think it was such an easy thing before? Well, fools can be taught! Now that the idea is clear, let’s implement it step by step according to this idea.

First create a DIV, hide it, and add all the styles you want to it. The code is as follows:

Copy the code The 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.zIndex = "999";
tipdiv.style.border = "1px solid #000";
tipdiv.style.background = "# F4F8FC";
tipdiv.style.fontsize = "14px";
var rootEle = document.body || document.documentElement;
rootEle.appendChild(tipdiv);

Then add the onmousemove event and onmouseout event to the label to be added. For the sake of greater commonality, here I give all the labels to be added a common class name (txbtip).

Copy code The 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 n = "" n "";
var cn = " " allElements[i].className " ";
if (cn.indexOf(n) != -1) {
classElements[classElements.length] = allElements[i];
}
}
return classElements;
}

Note: This method is to get the set of certain tags with class n.

Copy the code The 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 doing this here is to clear the original title prompt.
tipdiv.innerHTML = title;
setTipPosition(e);//This method is used to position the tip box.
}
txbtip[tip].onmousemove = function(e) {
setTipPosition(e);//This method is used to position the prompt box.
}
txbtip[tip].onmouseout = function(e) {
//alert("out");
this.title = temp;
temp = "";
tipdiv.style.display = "none";
}

The last step is to position the label, which is the setTipPotion method that appeared above. Its specific implementation is as follows :

Copy code The 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.documentElement.scrollTop;
tipdiv .style.top = e.clientY 10 top 'px';
}

Now that we are almost done, we can then reverse it and combine it with page binding. So write it into window.onload.

window.onload=function(){...}
However, in this case, it is possible that a page will have multiple window.onload events and lead to failure, so some work needs to be done. Moreover, the corresponding label of the prompt box just now may already have a mouse event, and a judgment must be added.

if (window.addEventListener) { window.addEventListener("load", ready, false); } else if (window.attachEvent) { window.attachEvent("onload", ready); }
The following is the complete code
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.zIndex = "999";
tipdiv.style.border = "1px solid #000";
tipdiv.style.background = "#F4F8FC";
tipdiv.style.fontsize = "14px";
tipdiv.style.display = "none";
var rootEle = document.body || document.documentElement;
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 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.documentElement.scrollTop;
tipdiv.style.top = e.clientY 10 top 'px';
}
}
[code]

<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="">