<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body {
margin: 0;
padding: 0;
}
p {
width: 600px;
position: fixed;
bottom: 5px;
}
span[title]{
color: green;
position: relative;
}
span {
color: red;
}
span.title {
color: black;
position: absolute;
line-height: 26px;
padding: 0 5px;
background: #FFFFCA;
border: 1px solid #000;
z-index: 1;
white-space: nowrap;
top: 18px;
left: 0;
position: absolute;
display: none;
}
</style>
<script type="text/javascript">
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>
<script type="text/javascript">
window.onload = function ()
{
var op = document.getElementsByTagName('p')[0];
var aspan = document.getElementsByTagName('span');
op.style.left = (document.documentElement.clientWidth - op.offsetWidth)/2 + 'px';
window.onreset = function ()
{
op.style.left = (document.documentElement.clientWidth - op.offsetWidth )/2 + 'px';
};
for( var i = 0 ; i < aspan.length; i++ )
{
if(aspan[i].getAttribute('title'))
{
var otip = document.createElement('span');
otip.className = 'title';
otip.innerHTML = aspan[i].title;
aspan[i].appendChild(otip);
aspan[i].onmouseover = function ()
{
this.children[0].style.display = 'block';
if(getPos(aspan[i].children[0]).top + 26 > document.documentElement.clientLeft + document.body.scrollHeight)
{
this.children[0].style.top = '-30px';
}
};
aspan[i].onmouseout = function ()
{
this.children[0].style.display = 'none';
};
}
}
var str = aspan[0].children[0].innerHTML;
aspan[0].children[0].innerHTML = str.split('JavaScript').join('<span style = "color:red;font-weight:bold;">JavaScript</span>')
};
</script>
</head>
<body>
<p>
<span title="JavaScript是一门很热门的语言">JavaScript</span>是面向Web的编程语言，绝大多数现代网站都使用了<span title="JavaScript">JavaScript</span>，并且所有的现代<span title="Web">Web</span>浏览器——基于<span>桌面系统</span>、游戏机、平板电脑和智能手机的浏览器——均包含了<span title="JavaScript">JavaScript</span>解释器。这使得<span title="JavaScript">JavaScript</span>能够称得上史上最广泛的编程语言。<span title="JavaScript">JavaScript</span>也是前端开发工程师必须掌握的三种技能之一，描述网页内容的<span title="HTML">HTML</span>、描述网页样式的<span title="CSS">CSS</span>以及描述网页行为的<span title="JavaScript">JavaScript</span>。
</p>
</body>
</html>
