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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js提示信息jtip封装代码，可以是图片或文章，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6525字，纯文字阅读大概需要10分钟。

内容图文

话说本人转行做了前端，于是乎每天都是些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] 

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

内容总结

以上是互联网集市为您收集整理的js提示信息jtip封装代码，可以是图片或文章全部内容，希望文章能够帮你解决js提示信息jtip封装代码，可以是图片或文章所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/372014.html

来源：【匿名】