js提示信息jtip封装代码，可以是图片或文章
2024-05-06 14:11:41
供稿：网友
话说本人转行做了前端，于是乎每天都是些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提示.
