Home  >  Article  >  Web Front-end  >  A simple example of js mouse movement to display pictures_javascript skills

A simple example of js mouse movement to display pictures_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:07:061303browse

1. js code

Copy code The code is as follows:

//***********默认设置定义.*********************  
tPopWait=50;//停留tWait豪秒后显示提示。  
tPopShow=5000;//显示tShow豪秒后关闭提示  
showPopStep=20; 
popOpacity=99; 

//***************内部变量定义*****************  
sPop=null; 
curShow=null; 
tFadeOut=null; 
tFadeIn=null; 
tFadeWaiting=null; 

document.write(""); 
document.write("
"); 

 
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; 
            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        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; 

2. The html code only needs to include js code, usage example

Big< ;/a> small

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn