Heim > Web-Frontend > js-Tutorial > js 鼠标移动显示图片的简单实例_javascript技巧

js 鼠标移动显示图片的简单实例_javascript技巧

WBOY
Freigeben: 2016-05-16 17:07:06
Original
1332 Leute haben es durchsucht

一、js代码

复制代码 代码如下:

//***********默认设置定义.*********************  
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; 

二、html代码包含js代码即可,使用范例

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage