Question

我尝试创建类似于this one的图像缩放效果。我设法搜索了一个名为prefixfree.js的插件并在我的代码中尝试了它，但它没有用，它只是显示图像但是当我悬停它时没有图像缩放效果。

插件的链接是this。它应该像this一样工作。

另外，对于其他信息，大图像的尺寸为1406X1275，小图像为200X200。请帮助我解决这个问题或提供更好的替代方案。

＆＃13;

$(document).ready(function() {
      var native_width$ = 0;
      var native_height = 0;

      $(".magnify").mousemove(function(e) {
          //When the user hovers on the image, the script will first calculate
          //the native dimensions if they don't exist. Only after the native dimensions
          //are available, the script will show the zoomed version.
          if (!native_width && !native_height) {
            //This will create a new image object with the same image as that in .small
            //We cannot directly get the dimensions from .small because of the
            //width specified to 200px in the html. To get the actual dimensions we have
            //created this image object.
            var image_object = new Image();
            image_object.src = $(".small").attr("src");

            //This code is wrapped in the .load function which is important.
            //width and height of the object would return 0 if accessed before
            //the image gets loaded.
            native_width = image_object.width;
            native_height = image_object.height;
          } else {
            //x/y coordinates of the mouse
            //This is the position of .magnify with respect to the document.
            var magnify_offset = $(this).offset();
            //We will deduct the positions of .magnify from the mouse positions with
            //respect to the document to get the mouse positions with respect to the
            //container(.magnify)
            var mx = e.pageX - magnify_offset.left;
            var my = e.pageY - magnify_offset.top;

            //Finally the code to fade out the glass if the mouse is outside the container
            if (mx < $(this).width() && my < $(this).height( && mx > 0 && my > 0) {
                $(".large").fadeIn(100);
              } else {
                $(".large").fadeOut(100);
              }
              if ($(".large").is(":visible")) {
                //The background position of .large will be changed according to the position
                //of the mouse over the .small image. So we will get the ratio of the pixel
                //under the mouse pointer with respect to the image and use that to position the
                //large image inside the magnifying glass
                var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
                var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
                var bgp = rx + "px " + ry + "px";

                //Time to move the magnifying glass with the    mouse
                var px = mx - $(".large").width() / 2;
                var py = my - $(".large").height() / 2;
                //Now the glass moves with the mouse
                //The logic is to deduct half of the glass's width and height from the 
                //mouse coordinates to place it with its center at the mouse coordinates

                //If you hover on the image now, you should see the magnifying glass in action
                $(".large").css({
                  left: px,
                  top: py,
                  backgroundPosition: bgp
                });
              }
            }
          })
      })

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.magnify {
  width: 200px;
  margin: 50px auto;
  position: relative;
}

.large {
  width: 175px;
  height: 175px;
  position: absolute;
  border-radius: 100%;
  /*Multiple box shadows to achieve the glass effect*/
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  /*Lets load up the large image first*/
  background: url('microsoftLogo1.jpg') no-repeat;
  /*hide the glass by default*/
  display: none;
}

#subPic1 {
  border: 1px solid black;
  margin: 5px;
  width: 50px;
  height: 50px;
}

#subPic2 {
  border: 1px solid black;
  margin: 5px;
  width: 50px;
  height: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="magnify">
  <div class="large"></div>
  <img class="small" src="microsoftLogo1Small.jpg" />
</div>
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>

<img id="subPic1" src="microsoftLogo1.jpg" onclick="getImage1()" /><br/>
<img id="subPic2" src="microsoftLogo2.jpg" onclick="getImage2()" />

＆＃13;

Answer 1

<强> HTML

<img src="sample.png" class="zoom" />

<强> CSS

img.zoom {
   width: 350px;
   height: 200px;
   -webkit-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -o-transition: all .2s ease-in-out;
   -ms-transition: all .2s ease-in-out;
}
.transition {
   -webkit-transform: scale(1.8); 
   -moz-transform: scale(1.8);
   -o-transform: scale(1.8);
   transform: scale(1.8);
}

<强>的JavaScript

$(document).ready(function(){
   $('.zoom').hover(function() {
      $(this).addClass('transition');
   }, function() {
      $(this).removeClass('transition');
   });
});

Answer 2

<强> HTML

<div class="item">
  <img src="pepsi.jpg" alt="pepsi" width="540" height="548">

  <div class="item-overlay top"></div>
</div>

<强> CSS

* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .item {
     position: relative;
     border: 1px solid #333;
     margin: 2%;
     overflow: hidden;
     width: 540px;
   }
   .item img {
      max-width: 100%;
     -moz-transition: all 0.3s;
      -webkit-transition: all 0.3s;
     transition: all 0.3s;
   }
   .item:hover img {
     -moz-transform: scale(1.1);
     -webkit-transform: scale(1.1);
      transform: scale(1.1);
   }

如何使用jquery创建图像缩放效果？

2 个答案: