Javascript Realization Magnifier Effect example detailed _javascript skill

Javascript Implementation Magnifier Effect

When we do the task today, there is a task is to achieve the electronic business site commonly used Magnifier effect, similar to such a magnifying glass effect, before and did not do this magnifying glass effect, the beginning of the idea is to cut the picture, but later found it is difficult to achieve, so help the almighty Google, Found a good idea is that the display area is a small piece of visual area, give him a picture, beyond the visual area of the part set as hidden, with this idea, this effect can be very good implementation, first look at the HTML structure!

<div id= "Pic_wrap" >
  <div id= "Float_box" ></div>
  
</div>
<div id= "show" >
  
</div>

The outermost two Div, respectively, is the original picture area of the product, and the enlarged visual area! The area with ID Float_box is the area shown by Magnifier! The first IMG for the merchandise picture, the second img is reserved for the enlarged after merchandise! Picture CSS code as follows!

img {
      width:250px;
      height:150px;
    }
    #pic_wrap {
      position:relative;
      width:250px;
      height:150px;
    }
    #float_box {
      width:100px;
      height:100px;
      Background-color:green;
      Filter:opacity (alpha:30);
      opacity:0.3;
      Position:absolute;
      Display:none;
    }
    #big_img {
      background-image:url (1.jpg);
      height:450px;
      width:750px;
      Background-repeat:no-repeat;
      Background-size:cover;
      position:relative;
    }
    #show {    
      width:300px;
      height:300px;
      Background-color:white;
      opacity:1;
      Filter:opacity (alpha:1);
      Overflow:hidden;
      Display:none;
    }

HTML and CSS to write well, you need to use JS to add some interactive effect to Magnifier!

The first step, when the mouse moved into the time, Magnifier can be displayed! Need to add onmouseover event.

The second step, when the mouse is not removed, and the mouse is constantly moving in the picture, need to add onmousemove event.

The third step, when the mouse completely removed, you need to add onmouseout event.

Step fourth, the onmouseover event requires Magnifier and visual windows to be displayed.

The fifth step, onmousemove the event, lets the magnifier and the picture in the visual window move at the same time.

The sixth step, onmouseout time, lets the magnifying glass and but the window disappears!

The complete code is as follows:

<! DOCTYPE html>  

Thank you for reading, I hope to help you, thank you for your support for this site!