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

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：959 次日期：2016-07-26 15:19:49

温馨提示：小编为您整理了“javascript弹出带文字信息的提示框效果”,方便广大网友查阅！

js作用域是前端开发必掌握的基础知识。这篇文章主要介绍了javascript中的作用域的相关资料,需要的朋友可以参考下

本文实例讲述了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>

</HEAD>

<BODY>

</BODY>

</HTML>

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

上一篇：一次$.getJSON不执行的简单记录

下一篇：ECMAScript6快速入手攻略

手机网站地址：javascript弹出带文字信息的提示框效果

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！