ホームページ > ウェブフロントエンド > jsチュートリアル > photos_javascript スキルを表示するための js マウス移動の簡単な例

photos_javascript スキルを表示するための js マウス移動の簡単な例

WBOY
リリース: 2016-05-16 17:07:06
オリジナル
1333 人が閲覧しました

1. 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);
if(sPop==null || sPop=="" ) {
dypopLayer.innerHTML=" ";
dypopLayer.style.filter="Alpha()";
dypopLayer.Alpha.opacity=0;
}
else {
if(o.dyclass!=null ) PopStyle=o.dyclass
else PopStyle="cPopText";
curShow=setTimeout("showIt()",tPopWait);
}

}
}

関数 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. HTML コードには js コードのみを含める必要があります。使用例

大きい< ; /a>a href="../UpLoadFile/200911784060018.jpg" target="_blank" title="" ;small

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート