javascript弹出带文字信息的提示框效果
本文实例讲述了javascript弹出带文字信息的提示框效果。分享给大家供大家参考,具体如下:
tooltips.js:
//positionofthetooltiprelativetothemouseinpixel// varoffsetx=12; varoffsety=8; functionnewelement(newid) { if(document.createElement) { varel=document.createElement('div'); el.id=newid; with(el.style) { display='none'; position='absolute'; } el.innerHTML=' '; document.body.appendChild(el); } } varie5=(document.getElementByIdx&&document.all); varns6=(document.getElementByIdx&&!document.all); varua=navigator.userAgent.toLowerCase(); varisapple=(ua.indexOf('applewebkit')!=-1?1:0); functiongetmouseposition(e) { if(document.getElementByIdx) { variebody=(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; varlixlpixel_tooltip=document.getElementByIdx('tooltip'); lixlpixel_tooltip.style.left=(mousex+pagex+offsetx)+'px'; lixlpixel_tooltip.style.top=(mousey+pagey+offsety)+'px'; } } functiontooltip(tip) { if(!document.getElementByIdx('tooltip'))newelement('tooltip'); varlixlpixel_tooltip=document.getElementByIdx('tooltip'); lixlpixel_tooltip.innerHTML=tip; lixlpixel_tooltip.style.display='block'; document.onmousemove=getmouseposition; } functionexit() { 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> <scriptlanguage="JavaScript"src='tooltips.js'> </script> </HEAD> <BODY> <divonmouseover="tooltip('如果你添加的是一个播客(Podcast),请选中此复选框。');"onmouseout="exit();">蝶恋花</div> </BODY> </HTML>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript提示框效果汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。