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

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

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

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

推薦度：

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

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

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

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

先是創(chuàng)建一個(gè)DIV出來(lái)，并把它隱藏，給它加上你想要的所有樣式。代碼如下：

代碼如下:
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 = "";//這里這樣做的原因是為了清除原來(lái)存在的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';
}

這樣就算完成得差不多了，然后我們?cè)俚罐D(zhuǎn)過來(lái)，把它和頁(yè)面綁定相結(jié)合起來(lái)。于是乎寫進(jìn)window.onload里吧。

window.onload=function(){...}
然而這樣的話就會(huì)有可能出現(xiàn)一個(gè)頁(yè)面有多個(gè)window.onload事件而導(dǎo)至失效，所以還要加些工。而且剛才的提示框的對(duì)應(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);
}