软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：js,提示信息,jtip

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>封装自己的js提示信息jtip的示例 </title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="zh-cn" /> 
<meta name="robots" content="all" /> 
<meta name="author" content="田想兵" /> 
<meta name="Copyright" content="Copyright lovewebgames.com All Rights Reserved." /> 
<meta name="MSSmartTagsPreventParsing" content="true" /> 
<meta http-equiv="imagetoolbar" content="false" /> 
<script type="text/javascript"> 
//******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; 
} 
} 
</script> 
</head> 
<body> 
这是一个超链接 
</P><p> 
<input type="button" value="我是按钮" class="txbtip" title="别点我，点我我也不会理你的 。
不信的话你试试!"/> 
</P> 
<p><div class="txbtip" title="<img src=http://www.jb51.net/images/logo.gif/>">其它标签也可以做到哦</div></P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/web/news/2023/11m88659.html"  target=_blank > 双11大调查：四成受访者对“全网最低价”无感 </a></td><td><a href="http://www.zhujiangroad.com/edu/soft/75442.html"  target=_blank > 设置win7系统自动进入休眠状态的时间不让其自动断网 </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/software/news/2021/7m83590.html"  target=_blank > Win11优化大师来了：魔改微软默认界面及设置 </a></td><td><a href="http://www.zhujiangroad.com/edu/soft/74637.html"  target=_blank > 在Win7任务栏时间区如何显示农历、星期几和天气？ </a></td></tr></table></div> 
</body> 
</html>

技术文章快速查找

jquery json 实例代码

js中创建对象的几种方式示例介绍

JS遮罩层效果兼容ie firefox jQuery遮罩层

jQuery 行级解析读取XML文件（附源码）

javascript String split方法误操作

jquery获取div距离窗口和父级dv的距离示例

基于jquery的文本框与autocomplete结合使用(asp.net+json)

深入剖析Javascript replace函数用法

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建