首页 > 网络编程 > JavaScript > javascript技巧 > js 提示信息 jtip

js提示信息jtip封装代码，可以是图片或文章

2010-01-28 21:25:52 作者：

今天是相当的困，所以就点比较容易点的东西吧，讲关于鼠标移动后出现提示信息的js代码。能力有限，写得不好尽管提出来。

话说本人转行做了前端，于是乎每天都是些div+css啥的。今天就讲讲这个用js实现类似于A标签里的title或alt功能，至于这个功能有什么好处呢，你听我慢慢道来，首先title或alt属性所带来的提示太过于简单，样式也无法修改，而且鼠标要移到元素上等待1至3秒钟才会显示出来，内容也只有简单的文字，无法加入html内容。所以呢，综上所述，只好自己封装一个属于自己的js提示框了。或许你会说jquery不是有个jtip组件吗？不错，那说明你的思想还挺前卫。如果用得习惯的话那就用吧，反正用谁不是用呢？我只是拿出这个小例子来大家研究研究。

首先，我们要做的就是理清思路，做任何事都应该是这样，不要一拿到东西就开始写代码，先要想想我们要得到什么，然后再去付出什么。这就和谈恋爱似的，你不能总想着得到对方，而不去想方法去付出，呃，有点扯远了。我们要得到的是一个全新的提示框，它可以很简单，也可以很复杂，它应该能包罗万象海纳百川，这就很容易让人联想到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]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>封装自己的js提示信息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="田想兵" /> 
<meta name="Copyright" content="Copyright lovewebgames.com All Rights Reserved." /> 
<meta name="MSSmartTagsPreventParsing" content="true" /> 
<meta http-equiv="imagetoolbar" content="false" /> 
<script type="text/javascript"> 
//******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'; 
} 
} 
</script> 
</head> 
<body> 
<a href="/" class="txbtip" title="点击我就会进到列表页哦" target="_blank">这是一个超链接</a> 
</p><p> 
<input type="button" value="我是按钮" class="txbtip" title="别点我，点我我也不会理你的。
不信的话你试试!"/> 
</p> 
<p><div class="txbtip" title="<img src='https://www.jb51.net/images/logo.gif'/>">其它标签也可以做到哦</div></p> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

js提示信息jtip封装代码，可以是图片或文章

您可能感兴趣的文章: