编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。 【实例名称】 鼠标旁边的提示信息JS代码 【实例描述】 在大型门户网站中,为了让用户可以全面地了解网站的内容,通常需要简化很多按钮,但为了让用户可以了解按钮的用途,当鼠标指向按钮时,会出现提示信息详细介绍按钮的功能。本例介绍如何实现鼠标旁边的提示信息。 【实例代码】 <script Language="javascript">
//内部变量定义
tPopWait=50;
tPopShow=4000;
showPopStep=15;
popOpacity=80;
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;
//动态显示提示信息,注意此处定义了样式和层
document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText { background-color: #F8F8F5;
color:#000000; border: 1px #000000 solid;font-color:
font-size: 12px; padding-right: 4px; padding-left: 4px;
height: 20px; padding-top: 2px; padding-bottom: 2px;
filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:
absolute;z-index:1000;' class='cPopText'></div>"); //显示提示信息的方法
function showPopupText()
{
var o=event.srcElement;
//获取鼠标指向的链接或按钮
MouseX=event.x;
MouseY=event.y;
if(o.alt!=null && o.alt!="")
{o.dypop=o.alt;o.alt=""};
if(o.title!=null && o.title!="")
{o.dypop=o.title;o.title=""};
if(o.dypop!=sPop)
{
sPop=o.dypop;
//设置提示信息的内容-从控件的title属性获得
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
if(sPop==null || sPop=="")
{
dypopLayer.innerHTML="";
dypopLayer.style.filter="Alpha()";
dypopLayer.filters.Alpha.opacity=0;
}
else
{
if(o.dyclass!=null)
popStyle=o.dyclass
else popStyle="cPopText";
curShow=setTimeout("showIt()",tPopWait);
}
}
}
//定义显示的位置
function showIt()
{
dypopLayer.className=popStyle;
dypopLayer.innerHTML=sPop;
popWidth=dypopLayer.clientWidth;
popHeight=dypopLayer.clientHeight;
if(MouseX+12+popWidth>document.body.clientWidth)
popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+12+popHeight>document.body.clientHeight)
popTopAdjust=-popHeight-24
else popTopAdjust=0;
dypopLayer.style.left=MouseX+12+document.body.
scrollLeft+popLeftAdjust;
dypopLayer.style.top=MouseY+12+document.body.
scrollTop+popTopAdjust;
dypopLayer.style.filter="Alpha(Opacity=0)";
fadeOut();
}
//定义显示或隐藏提示层
function fadeOut()
{
if(dypopLayer.filters.Alpha.opacity<popOpacity)
{
dypopLayer.filters.Alpha.opacity+=showPopStep;
tFadeOut=setTimeout("fadeOut()",1);
}
else
{
dypopLayer.filters.Alpha.opacity=popOpacity;
tFadeWaiting=setTimeout("fadeIn()",tPopShow);
}
}
function fadeIn()
{
if(dypopLayer.filters.Alpha.opacity>0)
{
dypopLayer.filters.Alpha.opacity -= 1;
tFadeIn=setTimeout("fadeIn()",1);
}
}
document.onmouseover=showPopupText; 需要在body中添加一个连接,用来调用并实现提示效果,代码如下所示,注意要指定连接的title属性,它是提示信息的来源。
<a href="http://www.google.com" title="我最喜爱的搜索">搜索</a>
【运行效果】 【难点剖析】 本例中的重点是div层和CSS特效的应用。 【源码下载】 本实例JS代码下载
使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。 |