这只是个学习原生javascript过程中的一个练手效果 不做说明解释 直接上代码 算是个参考
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>关键字title提示</title>
<style>
*{padding:0;margin:0;}
#test{width:700px; margin:50px auto 0; line-height:26px; font-size:14px;}
p { text-indent:2em; position:relative;}
.hint { color:#3CF;}
#popHint { border:1px solid #F60; position:absolute; padding:0 4px; background:white; border-radius:2px;}
</style>
<script>
window.onload = function() { var oTest = document.getElementById('test'); var oHint = getClassName(document, '*', 'hint');
hint(oHint, 'popHint'); function hint(arrHint, popHintId) {
for(var i=0; i<arrHint.length; i++) {
arrHint[i].onmouseover = function() {
var popHint = document.createElement('div');
popHint.id = popHintId;
popHint.innerHTML = this.innerHTML;
var p = getPos(this);
popHint.style.position = 'absolute';
popHint.style.left = p.left + 'px';
popHint.style.top = p.top + this.offsetHeight + 'px';
document.body.appendChild(popHint);
}
arrHint[i].onmouseout = function() {
document.body.removeChild(popHint);
}
}
} function getClassName(obj, tagName, className){ var ele=obj.getElementsByTagName(tagName);
var result=[],aClassName=className.split(',').join('|'); var re=new RegExp('((^|\\s+)('+aClassName+')(\\s+|$))'); for(var i=0;i<ele.length;i++){
if(re.test(ele[i].className)){
result.push(ele[i]);
}
} return result;
} function getPos(obj) { var pos = {left:0,top:0}; while(obj) {
pos.left += obj.offsetLeft;
pos.top += obj.offsetTop;
obj = obj.offsetParent;
} return pos;
}
}
</script>
</head> <body>
<div id="test">
<p><span class="hint">JavaScript</span>一种直译式<span class="hint">脚本语言</span>,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为<span class="hint">JavaScript</span>引擎,为浏览器的一部分,广泛用于客户端的<span class="hint">脚本语言</span>,最早是在<span class="hint">HTML</span>(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。</p>
<p>在1995年时,由<span class="hint">Netscape</span>公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为<span class="hint">Netscape</span>与<span class="hint">Sun</span>合作,<span class="hint">Netscape</span>管理层希望它外观看起来像<span class="hint">Java</span>,因此取名为<span class="hint">JavaScript</span>。但实际上它的语法风格与Self及Scheme较为接近。</p>
</div>
</body>
</html>