Implement image magnification function based on jquery

Implement image magnification function based on jquery_jquery

WBOY

Release： 2016-05-16 15:01:44

Original

1462 people have browsed it

The example in this article shares with you the specific implementation code of jquery to implement the image magnification function for your reference. The specific content is as follows

The image magnification function is similar to viewing products on Taobao. If the mouse is moved over the small image, the large image will be displayed at the corresponding position. It would be a pain to write this code yourself. A class library - jquery.jqzoom.js is provided on the official website; you only need to introduce the sub-class library, reference this class library, and add some css code to achieve this function;
The HTML framework is as follows:

<div class="jqzoom">
  <img src="images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/>
</div>

Copy after login

Note that img must have the jqimg attribute . This attribute holds the address of the large image;

js code is as follows:

<script type="text/javascript">
    $(function () {
      $(".jqzoom").jqueryzoom({
        xzoom: 300,   //放大图的宽度（默认是200）
        yzoom: 300,   //放大图的高度（默认是200）
        offset: 10,   //离原图的距离（默认是10）
        position: "right",   //放大图的定位（默认是"right"）
        preload: 1
      })
    })
  </script>

Copy after login

Usage: $(".jqzoom").jqueryzoom

If you only add this much code, the effect will come out, but it is not so ideal. In order to be more beautiful, the following css code must be added:

<style type="text/css">
    .jqzoom{
      border:1px solid #BBB;
      float:left;
      position:relative;
      padding:0px;
      cursor:pointer;
    }
    
    /*jQzoom*/
    div.zoomdiv {
      z-index:  999;
      position        : absolute;
      top:0px;
      left:0px;
      width          : 200px;
      height         : 200px;
      background: #ffffff;
      border:1px solid #CCCCCC;
      display:none;
      text-align: center;
      overflow: hidden;
    }
    div.jqZoomPup {
      z-index         : 999;
      visibility       : hidden;
      position        : absolute;
      top:0px;
      left:0px;
      width          : 50px;
      height         : 50px;
      border: 1px solid #aaa;
      background: #ffffff url(../images/zoomlens.gif) 50% top no-repeat;;
      opacity: 0.5;
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      filter: alpha(Opacity=50);
    }
  </style>

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone in learning jquery programming.