var ttel = document.createElement('span')
ttel.style.position = 'absolute'
ttel.style.boder = '1px solid #e1dec9'
ttel.style.backgroundColor = '#eae9e3'
ttel.style.left = '0px'
ttel.style.top = '0px'
ttel.style.fontSize = '8pt'
ttel.style.padding = '2px 4px 2px 4px'
ttel.style.zIndex = 9999999
document.body.appendChild(ttel)
function showTooltip(e) {
console.log(e)
ttel.innerHTML = this.innerText || this.textContent || this.value
ttel.style.left = (e.pageX + 10) + 'px'
ttel.style.top = (e.pageY + 10) + 'px'
ttel.style.display = 'block'
return false
}
function hideTooltip(e) {
ttel.style.display = 'none'
ttel.innerHTML = ''
return false
}
function isTextNode(el) {
var children = el.children
if (el.childElementCount == 0)
return true
for (var i = 0 i < children.length i++) {
el = children[i]
var text = ((typeof el.innerText !== 'undefined' && el.innerText != '') ? el.innerText : el.textContent) || el.value
if (text)
return false
}
return true
}
function bindEvent(el) {
var children = el.children
if (children.length == 0 || isTextNode(el)) {
var text = ((typeof el.innerText !== 'undefined' && el.innerText != '') ? el.innerText : el.textContent) || el.value
if ((typeof text !== 'undefined' && text != '')) {
if (el.attachEvent) {
el.attachEvent('onmouseover', showTooltip)
el.attachEvent('onmouseout', hideTooltip)
} else if (el.addEventListener) {
el.addEventListener('mouseover', showTooltip)
el.addEventListener('mouseout', hideTooltip)
}
}
} else {
for (var i = 0 i < children.length i++) {
if (children[i])
bindEvent(children[i])
}
}
}
var el = document.body
bindEvent(el)
})(document)
直接利用css就能办到鼠标移上去显示 离开隐藏的效果：<style>
#aa{position:relativewidth:300pxheight:200px}
#aa img{display:blockwidth:100%height:100%}
#aa span{display:none}
#aa:hover span{position:absoluteleft:0bottom:0display:blockwidth:100%height:30pxline-height:30pxtext-align:centercolor:#eee}
</style>
JS写法：
<script>
window.onload = function(){
var box = document.getElementById('aa')
box.onmouseover = function(){
this.getElementsByTagName('span')[0].style.display = 'block'
}
box.onmouseout = function(){
this.getElementsByTagName('span')[0].style.display = 'none'
}
}
</script>
<div id="aa">
<img src="http://pic31.nipic.com/20130725/5252423_162905249000_2.jpg" />
<span>文字内容</span>
</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<title>New Document </title>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<meta name="Author" content="笃行天下">
<meta name="Keywords" content="笃行天下">
<meta name="Description" content=" http://hi.baidu.com/duxing">
</head><body>
<input type=button value='左滚' onmouseover="leftRoll()" onmouseout="stopRoll()">
<marquee id="dodoRoll" width="30%">笃行天下_笃行天下_笃行天下_笃行天下_笃行天下</marquee>
<input type=button value='右滚' onmouseover="rightRoll()" onmouseout="stopRoll()"></body>
</html>
<script language="JavaScript">
<!--
document.getElementById("dodoRoll").stop()
function leftRoll()
{
document.getElementById("dodoRoll").direction="left"
document.getElementById("dodoRoll").start()
} function rightRoll()
{
document.getElementById("dodoRoll").direction="right"
document.getElementById("dodoRoll").start()
} function stopRoll()
{
document.getElementById("dodoRoll").stop()
}
//-->
</script>
