|
|
首先，我们要做的就是理清思路，做任何事都应该是这样，不要一拿到东西就开始写代码，先要想想我们要得到什么，然后再去付出什么。这就和谈恋爱似的，你不能总想着得到对方，而不去想方法去付出，呃，有点扯远了。我们要得到的是一个全新的提示框，它可以很简单，也可以很复杂，它应该能包罗万象海纳百川，这就很容易让人联想到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封装代码，可以是图片或文章，转载需保留来源！
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
