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