js提示信息jtip封裝代碼，可以是圖片或文章_javascript技巧

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:46:59

js提示信息jtip封裝代碼，可以是圖片或文章_javascript技巧

js提示信息jtip封裝代碼，可以是圖片或文章_javascript技巧:話說本人轉(zhuǎn)行做了前端，于是乎每天都是些div+css啥的。今天就講講這個(gè)用js實(shí)現(xiàn)類似于A標(biāo)簽里的title或alt功能，至于這個(gè)功能有什么好處呢，你聽我慢慢道來，首先title或alt屬性所帶來的提示太過于簡單，樣式也無法修改，而且鼠標(biāo)要移到元素上等待1至3秒鐘才

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀js提示信息jtip封裝代碼，可以是圖片或文章_javascript技巧:話說本人轉(zhuǎn)行做了前端，于是乎每天都是些div+css啥的。今天就講講這個(gè)用js實(shí)現(xiàn)類似于A標(biāo)簽里的title或alt功能，至于這個(gè)功能有什么好處呢，你聽我慢慢道來，首先title或alt屬性所帶來的提示太過于簡單，樣式也無法修改，而且鼠標(biāo)要移到元素上等待1至3秒鐘才

話說本人轉(zhuǎn)行做了前端，于是乎每天都是些div+css啥的。今天就講講這個(gè)用js實(shí)現(xiàn)類似于A標(biāo)簽里的title或alt功能，至于這個(gè)功能有什么好處呢，你聽我慢慢道來，首先title或alt屬性所帶來的提示太過于簡單，樣式也無法修改，而且鼠標(biāo)要移到元素上等待1至3秒鐘才會顯示出來，內(nèi)容也只有簡單的文字，無法加入html內(nèi)容。所以呢，綜上所述，只好自己封裝一個(gè)屬于自己的js提示框了。或許你會說jquery不是有個(gè)jtip組件嗎？不錯，那說明你的思想還挺前衛(wèi)。如果用得習(xí)慣的話那就用吧，反正用誰不是用呢？我只是拿出這個(gè)小例子來大家研究研究。

首先，我們要做的就是理清思路，做任何事都應(yīng)該是這樣，不要一拿到東西就開始寫代碼，先要想想我們要得到什么，然后再去付出什么。這就和談戀愛似的，你不能總想著得到對方，而不去想方法去付出，呃，有點(diǎn)扯遠(yuǎn)了。我們要得到的是一個(gè)全新的提示框，它可以很簡單，也可以很復(fù)雜，它應(yīng)該能包羅萬象海納百川，這就很容易讓人聯(lián)想到div。然后我還希望我的鼠標(biāo)移到某個(gè)標(biāo)簽時(shí)他能夠及時(shí)的出現(xiàn)在鼠標(biāo)附近，移開時(shí)消失。就這么簡單，現(xiàn)在思路一清晰了，是不是覺得原來就這么容易的一件事。恩，愚子可教也!既然思路也清晰了，那就一步步按照這個(gè)思路來實(shí)現(xiàn)吧。

先是創(chuàng)建一個(gè)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);

接著給要添加的標(biāo)簽加上onmousemove事件和onmouseout事件了，由于為了更公用，所以在這里我給所有要加的標(biāo)簽一個(gè)共同的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;
}

注：這個(gè)方法是獲取某些標(biāo)簽的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);//這個(gè)方法是給提示框定位的。
}
txbtip[tip].onmousemove = function(e) {
setTipPosition(e);//這個(gè)方法是給提示框定位的。
}
txbtip[tip].onmouseout = function(e) {
//alert("out");
this.title = temp;
temp = "";
tipdiv.style.display = "none";
}

最后就是給標(biāo)簽定位了，就是上面出現(xiàn)過的setTipPotion方法，它的具體實(shí)現(xiàn)如下：
代碼如下:
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';
}

這樣就算完成得差不多了，然后我們再倒轉(zhuǎn)過來，把它和頁面綁定相結(jié)合起來。于是乎寫進(jìn)window.onload里吧。

window.onload=function(){...}
然而這樣的話就會有可能出現(xiàn)一個(gè)頁面有多個(gè)window.onload事件而導(dǎo)至失效，所以還要加些工。而且剛才的提示框的對應(yīng)標(biāo)簽也有可能已經(jīng)有了鼠標(biāo)事件，也得加個(gè)判斷。

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);
}