|           编程(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代码下载   
 使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。 
 |