|
|
首先，我們要做的就是理清思路，做任何事都應(yīng)該是這樣，不要一拿到東西就開始寫代碼，先要想想我們要得到什么，然后再去付出什么。這就和談戀愛似的，你不能總想著得到對(duì)方，而不去想方法去付出，呃，有點(diǎn)扯遠(yuǎn)了。我們要得到的是一個(gè)全新的提示框，它可以很簡(jiǎn)單，也可以很復(fù)雜，它應(yīng)該能包羅萬(wàn)象海納百川，這就很容易讓人聯(lián)想到div。然后我還希望我的鼠標(biāo)移到某個(gè)標(biāo)簽時(shí)他能夠及時(shí)的出現(xiàn)在鼠標(biāo)附近，移開時(shí)消失。就這么簡(jiǎn)單，現(xiàn)在思路一清晰了，是不是覺得原來(lái)就這么容易的一件事。恩，愚子可教也!既然思路也清晰了，那就一步步按照這個(gè)思路來(lái)實(shí)現(xiàn)吧。
先是創(chuàng)建一個(gè)DIV出來(lái)，并把它隱藏，給它加上你想要的所有樣式。代碼如下：
復(fù)制代碼 代碼如下:
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);
接著給要添加的標(biāo)簽加上onmousemove事件和onmouseout事件了，由于為了更公用，所以在這里我給所有要加的標(biāo)簽一個(gè)共同的class名(txbtip)。
復(fù)制代碼 代碼如下:
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;
}
注：這個(gè)方法是獲取某些標(biāo)簽的class為n的集合.
復(fù)制代碼 代碼如下:
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 = "";//這里這樣做的原因是為了清除原來(lái)存在的title提示.
tipdiv.innerHTML = title;
setTipPosition(e);//這個(gè)方法是給提示框定位的。
}
txbtip[tip].onmousemove = function(e) {
setTipPosition(e);//這個(gè)方法是給提示框定位的。
}
txbtip[tip].onmouseout = function(e) {
//alert("out");
this.title = temp;
temp = "";
tipdiv.style.display = "none";
}
最后就是給標(biāo)簽定位了，就是上面出現(xiàn)過的setTipPotion方法，它的具體實(shí)現(xiàn)如下：
復(fù)制代碼 代碼如下:
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';
}
這樣就算完成得差不多了，然后我們?cè)俚罐D(zhuǎn)過來(lái)，把它和頁(yè)面綁定相結(jié)合起來(lái)。于是乎寫進(jìn)window.onload里吧。
window.onload=function(){...}
然而這樣的話就會(huì)有可能出現(xiàn)一個(gè)頁(yè)面有多個(gè)window.onload事件而導(dǎo)至失效，所以還要加些工。而且剛才的提示框的對(duì)應(yīng)標(biāo)簽也有可能已經(jīng)有了鼠標(biāo)事件，也得加個(gè)判斷。
if (window.addEventListener) { window.addEventListener("load", ready, false); } else if (window.attachEvent) { window.attachEvent("onload", ready); }
下面是完整的代碼
jstip.js
[code]
//******js文字提示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 < 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.documentElement.scrollTop;
tipdiv.style.top = e.clientY + 10 + top + 'px';
}
}
[code]
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
JavaScript技術(shù)：js提示信息jtip封裝代碼，可以是圖片或文章，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
