本文实例讲述了javascript弹出带文字信息的提示框效果。分享给大家供大家参考，具体如下：
tooltips.js:
// position of the tooltip relative to the mouse in pixel // var offsetx = 12; var offsety = 8; function newelement(newid) { if(document.createElement) { var el = document.createElement('div'); el.id = newid; with(el.style) { display = 'none'; position = 'absolute'; } el.innerHTML = ' '; document.body.appendChild(el); } } var ie5 = (document.getElementByIdx && document.all); var ns6 = (document.getElementByIdx && !document.all); var ua = navigator.userAgent.toLowerCase(); var isapple = (ua.indexOf('applewebkit') != -1 ? 1 : 0); function getmouseposition(e) { if(document.getElementByIdx) { var iebody=(document.compatMode && document.compatMode != 'BackCompat') ? document.documentElement : document.body; pagex = (isapple == 1 ? 0:(ie5)?iebody.scrollLeft:window.pageXOffset); pagey = (isapple == 1 ? 0:(ie5)?iebody.scrollTop:window.pageYOffset); mousex = (ie5)?event.x:(ns6)?clientX = e.clientX:false; mousey = (ie5)?event.y:(ns6)?clientY = e.clientY:false; var lixlpixel_tooltip = document.getElementByIdx('tooltip'); lixlpixel_tooltip.style.left =(mousex+pagex+offsetx) + 'px'; lixlpixel_tooltip.style.top =(mousey+pagey+offsety) + 'px'; } } function tooltip(tip) { if(!document.getElementByIdx('tooltip')) newelement('tooltip'); var lixlpixel_tooltip = document.getElementByIdx('tooltip'); lixlpixel_tooltip.innerHTML = tip; lixlpixel_tooltip.style.display = 'block'; document.onmousemove = getmouseposition; } function exit() { document.getElementByIdx('tooltip').style.display = 'none'; }
test.html
<html> <head> <style> .tableBorder7{width:800;solid; background-color: #000000;} TD{font-family: 宋体;font-size: 12px;line-height : 15px ;} th{background-color: #f7f7f7;color: #000000;font-size: 12px;font-weight:bold;} th.th1{background-color: #333333;} td.TableBody7{background-color: #B1EA45;} </style> <script language="JavaScript" src='https://www.jb51.net/tooltips.js'> </script> </HEAD> <BODY> <divonmouseout="exit();">蝶恋花</div> </BODY> </HTML>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript提示框效果汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章: