Simple Example of Javascript mouse movement for displaying images

Simple Example of Javascript mouse movement for displaying images

This article mainly introduces a simple example of js mouse moving and displaying images. If you need a friend, please refer to it and hope to help you.

I. js Code

 

The Code is as follows:

// ************ Default setting definition .*********************

TPopWait = 50; // The prompt is displayed after the tWait Hao seconds.

TPopShow = 5000; // display the tShow Hao seconds before closing the prompt

ShowPopStep = 20;

PopOpacity = 99;

 

// *************** Internal variable definition *****************

SPop = null;

CurShow = null;

TFadeOut = null;

TFadeIn = null;

TFadeWaiting = null;

 

Document. write ("<mce: style type = 'text/css 'id = 'defaultpopstyle'> <! --

");

Document. write (". cPopText {line-break: normal; word-break: break-all; background-color: # FEFCF3; color: #000000; border: 1px # E7B68C solid; padding-top: 2px; padding-right: 4px; padding-left: 4px; padding-bottom: 2px; font-size: 12px; width: 96px; filter: Alpha (Opacity = 0 )} ");

Document. write ("

--> </Mce: style> <style type = 'text/css 'id = 'defaultpopsty' mce_bogus = "1"> ");

Document. write (". cPopText {line-break: normal; word-break: break-all; background-color: # FEFCF3; color: #000000; border: 1px # E7B68C solid; padding-top: 2px; padding-right: 4px; padding-left: 4px; padding-bottom: 2px; font-size: 12px; width: 96px; filter: Alpha (Opacity = 0 )} ");

Document. write ("</style> ");

Document. write ("<div id = 'dypoplay' style =" position: absolute; z-index: 1000; "mce_style =" position: absolute; z-index: 1000; "class = 'poptext'> </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;

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;

 

Ii. html code contains js Code. Example

 

<A href = ".. /UpLoadFile/200911784060017.jpg" target = "_ blank" title = " "> large </a> <a href = ".. /UpLoadFile/200911784060018.jpg" target = "_ blank" title = " "> small </a>