javascript弹出带文字信息的提示框效果

2019-11-20 09:27:19

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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），请选中此复选框。');"onmouseout="exit();">蝶恋花</div></BODY></HTML>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript提示框效果汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：深入浅析javascript中的作用域(推荐)

下一篇：总结在前端排序中遇到的问题