Move the mouse over the image to enlarge the display, not the magnifier effect _ javascript skills

This article mainly introduces how to implement it through js. When you move the mouse over the image to increase the display effect rather than the magnifier effect, you can refer to ToopTip. js:

The Code is as follows:

Function getViewportHeight (){
If (window. innerHeight! = Window. undefined) return window. innerHeight;
If (document. compatMode = 'css1compat') return document.doc umentElement. clientHeight;
If (document. body) return document. body. clientHeight;

Return window. undefined;
}
Function getViewportWidth (){
If (window. innerWidth! = Window. undefined) return window. innerWidth;
If (document. compatMode = 'css1compat') return document.doc umentElement. clientWidth;
If (document. body) return document. body. clientWidth;

Return window. undefined;
}

/**
* Gets the real scroll top
*/
Function getScrollTop (){
If (self. pageYOffset) // all items t Explorer
{
Return self. pageYOffset;
}
Else if (document.doc umentElement & document.doc umentElement. scrollTop)
// Explorer 6 Strict
{
Return document.doc umentElement. scrollTop;
}
Else if (document. body) // all other Explorers
{
Return document. body. scrollTop;
}
}
Function getScrollLeft (){
If (self. pageXOffset) // all privileges t Explorer
{
Return self. pageXOffset;
}
Else if (document.doc umentElement & document.doc umentElement. scrollLeft)
// Explorer 6 Strict
{
Return document.doc umentElement. scrollLeft;
}
Else if (document. body) // all other Explorers
{
Return document. body. scrollLeft;
}
}
/*
[Html]
Gradient pop-up image
Usage:
Add ToolTip. js to the end tag of the webpage body.
Call method:
[Code]
') "OnMouseOut =" toolTip () ">

CSS style required

The Code is as follows:

. Trans_msg
{
Filter: alpha (opacity = 100, enabled = 1) revealTrans (duration =. 2, transition = 1) blendtrans (duration =. 2 );
}
*/
// -- Initialize the variable --
Var rT = true; // allows image transition
Var bT = true; // allows the image to fade in and out
Var tw = 150; // The width of the prompt box.
Var endaction = false; // end the animation
Var ns4 = document. layers;
Var ns6 = document. getElementById &&! Document. all;
Var ie4 = document. all;
OffsetX = 10;
OffsetY = 20;
Var toolTipSTYLE = "";
Function initToolTips ()
{
TempDiv = document. createElement ("p ");
TempDiv. id = "toolTipLayer ";
TempDiv. style. position = "absolute ";
TempDiv. style. display = "none ";
Document. body. appendChild (tempDiv );
If (ns4 | ns6 | ie4)
{
If (ns4) toolTipSTYLE = document. toolTipLayer;
Else if (ns6) toolTipSTYLE = document. getElementById ("toolTipLayer"). style;
Else if (ie4) toolTipSTYLE = document. all. toolTipLayer. style;
If (ns4) document. captureEvents (Event. MOUSEMOVE );
Else
{
ToolTipSTYLE. visibility = "visible ";
ToolTipSTYLE. display = "none ";
}
Document. onmousemove = moveToMouseLoc;
}
}
Function toolTip (msg, fg, bg)
{
Try {
If (toolTip. arguments. length <1) // hide
{
If (ns4)
{
ToolTipSTYLE. visibility = "hidden ";
}
Else
{
// -- Image transition, fade out processing --
If (! Endaction) {toolTipSTYLE. display = "none ";}
If (rT) document. all ("msg1"). filters [1]. Apply ();
If (bT) document. all ("msg1"). filters [2]. Apply ();
Document. all ("msg1"). filters [0]. opacity = 0;
If (rT) document. all ("msg1"). filters [1]. Play ();
If (bT) document. all ("msg1"). filters [2]. Play ();
If (rT ){
If (document. all ("msg1 "). filters [1]. status = 1 | document. all ("msg1 "). filters [1]. status = 0 ){
ToolTipSTYLE. display = "none ";}
}
If (bT ){
If (document. all ("msg1 "). filters [2]. status = 1 | document. all ("msg1 "). filters [2]. status = 0 ){
ToolTipSTYLE. display = "none ";}
}
If (! RT &&! BT) toolTipSTYLE. display = "none ";
//----------------------
}
}
Else // show
{
If (! Fg) fg = "#777777 ";
If (! Bg) bg = "# eeeeee ";
Var content =
'

'+ ' '"Size ="-2 ">' + msg + '

';

If (ns4)
{
ToolTipSTYLE.doc ument. write (content );
ToolTipSTYLE.doc ument. close ();
ToolTipSTYLE. visibility = "visible ";
}
If (ns6)
{
Document. getElementById ("toolTipLayer"). innerHTML = content;
ToolTipSTYLE. display = 'block'
}
If (ie4)
{
Document. all ("toolTipLayer"). innerHTML = content;
ToolTipSTYLE. display = 'block'
// -- Image transition, fade-in processing --
Var cssopaction = document. all ("msg1"). filters [0]. opacity
Document. all ("msg1"). filters [0]. opacity = 0;
If (rT) document. all ("msg1"). filters [1]. Apply ();
If (bT) document. all ("msg1"). filters [2]. Apply ();
Document. all ("msg1"). filters [0]. opacity = cssopaction;
If (rT) document. all ("msg1"). filters [1]. Play ();
If (bT) document. all ("msg1"). filters [2]. Play ();
//----------------------
}
}
} Catch (e ){}
}
Function moveToMouseLoc (e)
{
Var scrollTop = getScrollTop ();
Var scrollLeft = getScrollLeft ();
If (ns4 | ns6)
{
X = e. pageX + scrollLeft;
Y = e. pageY-scrollTop;
}
Else
{
X = event. clientX + scrollLeft;
Y = event. clientY;
}

If (x-scrollLeft> getViewportWidth ()/2 ){
X = x-document. getElementById ("toolTipLayer"). offsetWidth-2 * offsetX;
}

If (y + document. getElementById ("toolTipLayer"). offsetHeight + offsetY)> getViewportHeight ()){
Y = getViewportHeight ()-document. getElementById ("toolTipLayer"). offsetHeight-offsetY;
}
ToolTipSTYLE. left = (x + offsetX) + 'px ';
ToolTipSTYLE. top = (y + offsetY + scrollTop) + 'px ';
Return true;
}
InitToolTips ();

Home page:
Import index.css

The Code is as follows:

• 
  

  ') "OnMouseOut =" toolTip () ">

  
  



• 
  

  ') "OnMouseOut =" toolTip () ">

  
  

Introduce ToopTip. js

The Code is as follows: