js提示信息jtip封裝代碼，可以是圖片或文章
2024-05-06 14:11:41
供稿：網(wǎng)友
話說本人轉(zhuǎn)行做了前端，于是乎每天都是些div+css啥的。今天就講講這個用js實現(xiàn)類似于A標簽里的title或alt功能，至于這個功能有什么好處呢，你聽我慢慢道來，首先title或alt屬性所帶來的提示太過于簡單，樣式也無法修改，而且鼠標要移到元素上等待1至3秒鐘才會顯示出來，內(nèi)容也只有簡單的文字，無法加入html內(nèi)容。所以呢，綜上所述，只好自己封裝一個屬于自己的js提示框了。或許你會說jquery不是有個jtip組件嗎？不錯，那說明你的思想還挺前衛(wèi)。如果用得習慣的話那就用吧，反正用誰不是用呢？我只是拿出這個小例子來大家研究研究。
首先，我們要做的就是理清思路，做任何事都應(yīng)該是這樣，不要一拿到東西就開始寫代碼，先要想想我們要得到什么，然后再去付出什么。這就和談戀愛似的，你不能總想著得到對方，而不去想方法去付出，呃，有點扯遠了。我們要得到的是一個全新的提示框，它可以很簡單，也可以很復雜，它應(yīng)該能包羅萬象海納百川，這就很容易讓人聯(lián)想到div。然后我還希望我的鼠標移到某個標簽時他能夠及時的出現(xiàn)在鼠標附近，移開時消失。就這么簡單，現(xiàn)在思路一清晰了，是不是覺得原來就這么容易的一件事。恩，愚子可教也!既然思路也清晰了，那就一步步按照這個思路來實現(xiàn)吧。
先是創(chuàng)建一個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提示.
