js超漂亮的鼠标提示，带人性化缺口

<!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>鼠标提示符</title> 
<style> 
* { padding: 0; margin: 0; } 
li { } 
body { background: #fdf7f7; }

#explain { height: 60px; border-bottom: 1px solid #999999; background: #eee; font-size: 14px; color: #666; text-align: center; line-height: 60px; } 
#explain a { color: #990000; font-weight: bold; text-decoration: none; border-bottom: 1px dotted #990000; } 
#explain a:hover { border-bottom: 2px solid #990000; } 
#explain strong { color: #990000; } 
ul { width: 716px; position: absolute; top: 260px; left: 50%; margin-left: -358px; } 
li { width: 160px; height: 100px; list-style: none; background: #fff; padding: 3px; border-top: 1px solid #ddd; border-right: 2px solid #ddd; border-bottom: 2px solid #ddd; border-left: 1px solid #ddd; float: left; margin-right: 10px; cursor: pointer; } 
img { float: left; } 
#topic { width: 270px; background: #fff; padding: 3px; border-top: 1px solid #ddd; border-right: 2px solid #ddd; border-bottom: 2px solid #ddd; border-left: 1px solid #ddd; position: absolute; top: 100px; left: 200px; } 
#topic .adorn { width: 7px; height: 11px; overflow: hidden; background: url(/upload/201011/20101103150729602.gif); position: absolute; bottom: 15px; left: -7px; } 
#topic .adorn_r { width: 7px; height: 11px; overflow: hidden; background: url(/upload/201011/20101103150729137.gif); position: absolute; bottom: 15px; right: -7px; } 
#topic .inner_html { padding: 10px; line-height: 20px; font-size: 12px; color: #666; text-indent: 24px; font-family: arial; } 
#topic .inner_html a { color: #990000; font-weight: bold; text-decoration: none; border-bottom: 1px dotted #990000; } 
#topic .inner_html a:hover { border-bottom: 2px solid #990000; } 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20g_aData%3D%20%0D%0A%5B%20%0D%0A'%E7%9F%B3%E5%B7%9D(blue)%E4%B8%BA%E5%A4%A7%E5%AE%B6%E5%88%86%E4%BA%AB%E4%BA%86%E4%BB%A5%E4%B8%8B%E5%86%85%E5%AE%B9%EF%BC%9A%E6%96%B0%E6%B5%AA%E5%BE%AE%E5%8D%9A%E6%95%88%E6%9E%9C%E3%80%81DOM%E3%80%81%E9%97%AD%E5%8C%85%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7%E3%80%81%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E3%80%81%E9%AB%98%E7%BA%A7%E6%8B%96%E6%8B%BD%E3%80%81%E8%BF%90%E5%8A%A8%E7%89%B9%E6%95%88%E3%80%81AJax%E3%80%81%E5%AE%98%E7%BD%91%E5%AF%BC%E8%88%AA%E6%95%88%E6%9E%9C%E7%AD%89%5E_%5E%EF%BC%81'%2C%20%0D%0A'%E8%AF%BE%E7%A8%8B%E5%86%85%E5%AE%B9%E7%89%B9%E5%88%AB%E7%B2%BE%E9%80%89%E4%BA%86JavaScript%E7%9A%84%E9%AB%98%E7%BA%A7DOM%E6%93%8D%E4%BD%9C%E3%80%81AJAX%E6%8A%80%E6%9C%AF%E5%BA%94%E7%94%A8%E3%80%81OOP%E6%80%9D%E6%83%B3%E3%80%81%E7%BB%A7%E6%89%BF%E7%AD%89%E7%9F%A5%E8%AF%86%E8%BF%9B%E8%A1%8C%E6%B7%B1%E5%BA%A6%E5%89%96%E6%9E%90%EF%BC%8C%E5%8A%9B%E5%9B%BE%E4%B8%BA%E5%AD%A6%E5%91%98%E6%8F%AD%E7%A7%98%E5%90%84%E7%A7%8D%E7%BD%91%E7%AB%99%E4%BA%A4%E4%BA%92%E6%95%88%E6%9E%9C%EF%BC%8C%E5%B9%B6%E5%B8%AE%E5%8A%A9%E5%AD%A6%E5%91%98%E5%BB%BA%E7%AB%8B%E6%AD%A3%E7%A1%AE%E8%80%8C%E6%B8%85%E6%99%B0%E7%9A%84%E7%BC%96%E7%A8%8B%E6%80%9D%E8%B7%AF%E2%80%A6%E2%80%A6'%2C%20%0D%0A'%E9%AB%98%E7%BA%A7%E9%A1%B5%E9%9D%A2%E6%9E%B6%E6%9E%84%E5%B8%88%E7%B2%BE%E5%93%81%E8%AF%BE%E7%A8%8B%E6%98%AF%E4%B8%BA%E4%BA%86%E8%AE%A9%E5%A4%A7%E5%AE%B6%E5%88%B6%E4%BD%9C%E5%87%BA%E8%BE%83%E4%B8%BA%E8%A7%84%E8%8C%83%E7%9A%84%E9%A1%B5%E9%9D%A2%EF%BC%8C%E4%BE%8B%E5%A6%82%EF%BC%9A%E7%AC%A6%E5%90%88%20W3C%20%E6%A0%87%E5%87%86%E3%80%81%E6%A0%87%E7%AD%BE%E8%AF%AD%E4%B9%89%E5%8C%96%E3%80%81%E6%A8%A1%E5%9D%97%E5%8C%96%E5%B8%83%E5%B1%80%E3%80%81%E8%83%BD%E7%86%9F%E7%BB%83%E8%A7%A3%E5%86%B3%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7%E3%80%81%E8%83%BD%E6%B4%9E%E6%99%B0%20CSS%20%E4%BB%A3%E7%A0%81%E6%80%A7%E8%83%BD%E7%AD%89%E9%97%AE%E9%A2%98%E7%9A%84%E6%9C%8B%E5%8F%8B%E4%BB%AC%E8%80%8C%E8%AE%BE%E3%80%82%E9%80%9A%E8%BF%87%E8%BF%99%E9%97%A8%E8%AF%BE%E7%A8%8B%EF%BC%8C%E4%BD%A0%E5%8F%AF%E4%BB%A5%E5%85%85%E5%88%86%E4%BA%86%E8%A7%A3%E5%88%B0%E6%A0%87%E5%87%86%E5%B8%A6%E6%9D%A5%E7%9A%84%E5%A5%BD%E5%A4%84%E3%80%81%E9%A1%B5%E9%9D%A2%E4%BB%A3%E7%A0%81%E7%9A%84%E7%AE%80%E6%B4%81%E4%B8%8E%20CSS%20%E6%A0%B7%E5%BC%8F%E7%9A%84%E9%AB%98%E9%87%8D%E7%94%A8%E6%80%A7%E2%80%A6%E2%80%A6'%2C%20%0D%0A'%E9%9B%B6%E5%9F%BA%E7%A1%80%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C%E7%B2%BE%E5%93%81%E8%AF%BE%E7%A8%8B%E7%AB%99%E5%9C%A8%E5%AE%8C%E5%85%A8%E4%B8%8D%E6%87%82%E7%9A%84%E5%AD%A6%E5%91%98%E8%A7%92%E5%BA%A6%E8%80%83%E8%99%91%EF%BC%8C%E5%9C%A8%20%E8%AF%BE%E7%A8%8B%E5%AE%89%E6%8E%92%E3%80%81%E8%AF%BE%E5%90%8E%E8%BE%85%E5%AF%BC%20%E7%AD%89%E5%87%A0%E4%B8%AA%E6%96%B9%E9%9D%A2%E7%9D%80%E6%89%8B%EF%BC%8C%E5%8A%9B%E6%B1%82%E4%B8%BA%E5%AD%A6%E5%91%98%E5%B8%A6%E6%9D%A5%E4%B8%80%E9%97%A8%E7%B3%BB%E7%BB%9F%E5%8C%96%E6%9E%81%E5%BC%BA%E3%80%81%E8%AE%B2%E8%A7%A3%E9%A3%8E%E6%A0%BC%E5%8D%B4%E9%80%9A%E4%BF%97%E6%98%93%E6%87%82%E7%9A%84%20%E7%B2%BE%E5%93%81%E5%85%A5%E9%97%A8%E8%AF%BE%E7%A8%8B%EF%BC%8C%E6%AC%A2%E8%BF%8E%E6%9C%8B%E5%8F%8B%E4%BB%AC%E6%9D%A5%E8%AF%95%E5%90%AC%EF%BC%8C%E4%B8%80%E6%8E%A2%E7%A9%B6%E7%AB%9F%EF%BC%81'%20%0D%0A%5D%3B%20%0D%0A%0D%0Avar%20g_oTimerHide%3Dnull%3B%20%0D%0A%0D%0Awindow.onload%3Dfunction%20()%20%0D%0A%7B%20%0D%0Avar%20aLi%3Ddocument.getElementById('content').getElementsByTagName('li')%3B%20%0D%0A%0D%0AbindTopic(aLi)%3B%20%0D%0A%7D%3B%20%0D%0A%0D%0Afunction%20bindTopic(aElement)%20%0D%0A%7B%20%0D%0Avar%20i%3D0%3B%20%0D%0A%0D%0Afor(i%3D0%3Bi%3CaElement.length%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0AaElement%5Bi%5D.miaovIndex%3Di%3B%20%0D%0AaElement%5Bi%5D.onmouseover%3Dfunction%20(ev)%7BshowTopic(this.miaovIndex%2C%20window.event%20%7C%7C%20ev)%3B%7D%3B%20%0D%0AaElement%5Bi%5D.onmouseout%3Dfunction%20()%7BhideTopic()%3B%7D%3B%20%0D%0AaElement%5Bi%5D.onmousemove%3Dfunction%20(ev)%20%0D%0A%7B%20%0D%0Avar%20oEvent%3Dwindow.event%20%7C%7C%20ev%3B%20%0D%0AsetPosition(oEvent.clientX%2C%20oEvent.clientY)%3B%20%0D%0A%7D%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20showTopic(index%2C%20oEvent)%20%0D%0A%7B%20%0D%0Avar%20oTopic%3Ddocument.getElementById('topic')%3B%20%0D%0A%0D%0Aif(g_oTimerHide)%20%0D%0A%7B%20%0D%0AclearTimeout(g_oTimerHide)%3B%20%0D%0A%7D%20%0D%0A%0D%0AoTopic.getElementsByTagName('div')%5B1%5D.innerHTML%3Dg_aData%5Bindex%5D%3B%20%0D%0AoTopic.style.display%3D'block'%3B%20%0D%0A%0D%0AsetPosition(oEvent.clientX%2C%20oEvent.clientY)%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20hideTopic()%20%0D%0A%7B%20%0D%0Avar%20oTopic%3Ddocument.getElementById('topic')%3B%20%0D%0A%0D%0Aif(g_oTimerHide)%20%0D%0A%7B%20%0D%0AclearTimeout(g_oTimerHide)%3B%20%0D%0A%7D%20%0D%0Ag_oTimerHide%3DsetTimeout%20%0D%0A(%20%0D%0Afunction%20()%20%0D%0A%7B%20%0D%0AoTopic.style.display%3D'none'%3B%20%0D%0A%7D%2C50%20%0D%0A)%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20setPosition(x%2C%20y)%20%0D%0A%7B%20%0D%0Avar%20top%3Ddocument.body.scrollTop%20%7C%7C%20document.documentElement.scrollTop%3B%20%0D%0Avar%20left%3Ddocument.body.scrollLeft%20%7C%7C%20document.documentElement.scrollLeft%3B%20%0D%0A%0D%0Ax%2B%3Dleft%3B%20%0D%0Ay%2B%3Dtop%3B%20%0D%0A%0D%0Avar%20oTopic%3Ddocument.getElementById('topic')%3B%20%0D%0Avar%20l%3Dx%2B20%3B%20%0D%0Avar%20t%3Dy-(oTopic.offsetHeight-20)%3B%20%0D%0Avar%20bRight%3Dtrue%3B%20%0D%0Avar%20iPageRight%3Dleft%2Bdocument.documentElement.clientWidth%3B%20%0D%0A%0D%0Aif(l%2BoTopic.offsetWidth%3EiPageRight)%20%0D%0A%7B%20%0D%0AbRight%3Dfalse%3B%20%0D%0A%0D%0Al%3Dx-(oTopic.offsetWidth%2B20)%3B%20%0D%0AoTopic.getElementsByTagName('div')%5B0%5D.className%3D'adorn_r'%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0AoTopic.getElementsByTagName('div')%5B0%5D.className%3D'adorn'%3B%20%0D%0A%7D%20%0D%0A%0D%0AoTopic.style.left%3Dl%2B'px'%3B%20%0D%0AoTopic.style.top%3Dt%2B'px'%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</head>

<body> 
<div id="explain">可以调整窗口大小，再把鼠标移到图片上查看……</div> 
<div id="topic" style="display: none; z-index:2"> 
<div class="adorn"></div> 
<div class="inner_html"></div> 
</div>

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

教程首页更多教程