编者按:本教程由Michael Leigeber编写，他是一名网页设计师和。net开发人员雷格伯网络开发博客-这个博客以其漂亮、轻量级的JavaScript解决方案在博客社区中引起了轰动。
查看JavaScript工具提示演示．
简介
首先，创建本教程所需的3个文件(index.html、style.css和script.js)，并包括来自index.html的样式表和脚本。为了让事情变得简单，可以点击这里获得启动文件。在编写JavaScript时要记住的最重要的事情是保持代码的简单性和脚本的逻辑性。
首先需要确定的是您希望脚本完成的任务。根据所需的功能，它可以帮助您在进入代码之前为任何复杂的脚本创建图表或流程描述。这样做可以帮助简化逻辑并保持脚本干净。
我们想要完成的…
创建一个轻量级脚本，根据光标的位置用圆角淡出工具提示。
脚本需要如何流畅……
- 设置名称空间和全局变量。
- 创建一个函数来显示工具提示，该函数接受两个变量:要显示的字符串和一个可选的宽度整数。
- 调用该函数时，如果工具提示标记不存在，则构建它，并注册onmousemove侦听器来定位工具提示。将工具提示内容插入到工具提示中，并调用一个函数将工具提示渐变到目标不透明度。
- 在“热点”的mouseout事件上引用一个函数，该函数调用fade函数以增量地隐藏工具提示。
让我们从设置JavaScript文件开始。我们希望创建一个名称空间来封装脚本的功能。通过这样做，我们实际上消除了与其他脚本或框架发生冲突的可能性。
var工具提示(){返回{};} ();
接下来，我们需要在命名空间的全局级别上添加想要包含的任何变量。
通过全局设置这些变量，我们可以在任何子函数中访问它们，并快速更改它们，而无需对代码进行排序。
id(string) -工具提示的id前(整数)-从光标顶部偏移工具提示的像素数左(integer) -光标右边的偏移量maxw(整数)-工具提示的最大宽度(以像素为单位)速度(整数)-在转换期间增加工具提示不透明度的值计时器(整数)-表示执行fade函数的速度endalpha(整数)-工具提示的目标不透明度α(整数)-工具提示的当前alpha值tt，t，c，b，h-这些表示稍后设置的全局变量即(boolean) -基于浏览器供应商的全局变量
Var id = 'tt';Var top = 3;Var左= 3;Var maxw = 300;Var速度= 10;Var定时器= 20;Var endalpha = 95;Var = 0;var tt、t、c、b、h;Var ie = document。所有的吗? true : false;
我们需要确定工具提示的外观，这样我们就可以确定如何构建要添加到DOM中的元素——一个顶部有圆角且只有右角的矩形。为此，我们需要一个包装器div和三个嵌套div。我们可以用CSS设置div的样式。生成后的标记应该如下所示。
< div id = " tt " > < div id = " tttop " > < / div > < div id = " ttcont " > < / div > < div id = " ttbot " > < / div > < / div >
我们将第一个函数命名为“show”，它可以通过调用tooltip.show()来访问。它需要接受两个参数，内容字符串和一个可选的宽度整数。
首先，它需要检查工具提示是否已经添加到DOM中。如果它不存在，则需要构建div并将其添加到主体中。无论采用哪种方式，contentdiv的innerHTML都需要设置为内容参数，设置高度和宽度，并将fade函数设置为计时器。
show:function(v,w){if(tt == null){tt = document.createElement('div');tt.setAttribute (id, id);t = document.createElement (div);t.setAttribute (id, id +“顶级”);c = document.createElement (div);c.setAttribute (id, id +“合同”);b = document.createElement (div);b.setAttribute (id, id +“机器人”);tt.appendChild (t);tt.appendChild (c); tt.appendChild(b); document.body.appendChild(tt); tt.style.opacity = 0; tt.style.filter = 'alpha(opacity=0)'; document.onmousemove = this.pos; } tt.style.display = 'block'; c.innerHTML = v; tt.style.width = w ?W + 'px': 'auto';如果(!W && ie){t.style.display = 'none';b.style.display = '没有';tt.style.width = tt.offsetWidth;t.style.display =“块”;b.style.display =“块”;}如果(tt)。{tt.style offsetWidth > maxw)。width = maxw + 'px'} h = parseInt(tt.offsetHeight) + top; clearInterval(tt.timer); tt.timer = setInterval(function(){tooltip.fade(1)},timer); },
我们需要的下一个函数是position函数，它将在光标移动时设置工具提示的顶部和左侧值。首先根据浏览器计算位置，然后考虑全局偏移量变量设置值。
Pos:函数(e){var u = ie ?事件。clientY + document.documentElement.scrollTop : e.pageY; var l = ie ?事件。clientX + document.documentElement.scrollLeft : e.pageX; tt.style.top = (u - height) + 'px'; tt.style.left = (l + left) + 'px'; },
接下来，我们需要创建一个函数，根据传递给它的方向变量，将工具提示从当前不透明度渐变为目标不透明度。
渐变:函数(d){var a = alpha;如果((! = endalpha & & d = = 1) | |(一个! = 0 & & d = = 1)) {var i =速度;If (endalpha - a < speed && d == 1){I = endalpha - a;} else if(alpha < speed && d == -1){I = a;} alpha = a + (i * d);tt.style.不透明度= alpha * .01;Tt.style.filter =' alpha(不透明度=' + alpha + ')';其他}{clearInterval (tt.timer);If (d == -1){tt.style.display = 'none';}}},
最后是隐藏工具提示的函数onmouseout。
隐藏:函数(){clearInterval (tt.timer);tt。timer = setInterval(function(){tooltip.fade(-1)},timer); }
这就完成了JavaScript。剩下a2 kb的脚本这是兼容的使用IE6、IE7、Firefox、Opera和Safari浏览器。
这是完整的剧本
Var工具提示=函数(){Var id = 'tt';Var top = 3;Var左= 3;Var maxw = 300;Var速度= 10;Var定时器= 20;Var endalpha = 95;Var = 0;var tt、t、c、b、h;Var ie = document。所有的吗? true : false; return{ show:function(v,w){ if(tt == null){ tt = document.createElement('div'); tt.setAttribute('id',id); t = document.createElement('div'); t.setAttribute('id',id + 'top'); c = document.createElement('div'); c.setAttribute('id',id + 'cont'); b = document.createElement('div'); b.setAttribute('id',id + 'bot'); tt.appendChild(t); tt.appendChild(c); tt.appendChild(b); document.body.appendChild(tt); tt.style.opacity = 0; tt.style.filter = 'alpha(opacity=0)'; document.onmousemove = this.pos; } tt.style.display = 'block'; c.innerHTML = v; tt.style.width = w ? w + 'px' : 'auto'; if(!w && ie){ t.style.display = 'none'; b.style.display = 'none'; tt.style.width = tt.offsetWidth; t.style.display = 'block'; b.style.display = 'block'; } if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'} h = parseInt(tt.offsetHeight) + top; clearInterval(tt.timer); tt.timer = setInterval(function(){tooltip.fade(1)},timer); }, pos:function(e){ var u = ie ?事件。clientY + document.documentElement.scrollTop : e.pageY; var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX; tt.style.top = (u - h) + 'px'; tt.style.left = (l + left) + 'px'; }, fade:function(d){ var a = alpha; if((a != endalpha && d == 1) || (a != 0 && d == -1)){ var i = speed; if(endalpha - a < speed && d == 1){ i = endalpha - a; }else if(alpha < speed && d == -1){ i = a; } alpha = a + (i * d); tt.style.opacity = alpha * .01; tt.style.filter = 'alpha(opacity=' + alpha + ')'; }else{ clearInterval(tt.timer); if(d == -1){tt.style.display = 'none'} } }, hide:function(){ clearInterval(tt.timer); tt.timer = setInterval(function(){tooltip.fade(-1)},timer); } }; }();
现在转向CSS的工具提示，它是完全可定制的，可以匹配任何接口。
# tt{:绝对;显示:块;背景:url(images/tt_left.gif)左上角no-repeat;} #tttop {display:block;身高:5 px;margin-left: 5 px;背景:url(images/tt_top.gif)右上角no-repeat;溢出:隐藏;} #ttcont{显示:块;填充:2px 12px 3px 7px; margin-left:5px; background:#666; color:#fff; } #ttbot { display:block; height:5px; margin-left:5px; background:url(images/tt_bottom.gif) top right no-repeat; overflow:hidden; }
要构建和隐藏工具提示，请调用以下脚本。show函数中的第二个参数是可选的，如果没有传递，宽度将自动调整为maxh极限。
鼠标移到目标上= "工具提示。" onmouseout="tooltip.hide();"
如果您遇到任何问题与此脚本或有任何问题，请不要犹豫联系我我博客的联系方式．
下载
- starter.zip-启动文件，以帮助您跟随教程。
- tooltip.zip-完成的工具提示脚本和所需的文件，准备使用。
实际的建议
如欲了解更多有关网页设计而且它的重要性,请联系WebFX。WebFX的设计师们在各种各样的行业都有网页设计的经验。这里有一个例子，是他们为一个酒店的网页设计!
