本文實例講述了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='tooltips.js'></script></HEAD><BODY><div onmouseover="tooltip('如果你添加的是一個播客（Podcast），請選中此復(fù)選框。');"onmouseout="exit();">蝶戀花</div></BODY></HTML>更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript提示框效果匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
新聞熱點
疑難解答
