更新：

http://jsfiddle.net/gb0xcuwz/23/ 刚刚添加了一点css（这是不言自明的）

（我希望这就是你想要的）

旧答案：

（保留它，以防有人想要）

好的，因此您在评论中提供了http://jsfiddle.net/gb0xcuwz/5。

我根据匹配和试用方法（这是一个短语？）进行了一些更改，并提出了以下建议：http://jsfiddle.net/gb0xcuwz/16/

这也是一个代码段：

function imageZoom(imgID, resultID) {
    var img, lens, result, cx, cy;
    img = document.getElementById(imgID);
    result = document.getElementById(resultID);
    //create lens:
    lens = document.createElement("img");
    lens.setAttribute("class", "img-zoom-lens");
    //insert lens:
    img.parentElement.insertBefore(lens, img);
    //calculate the ratio between result DIV and lens:
    cx = 300 / lens.offsetWidth;
    cy = 300 / lens.offsetHeight;
    //set background properties for the result DIV:
    lens.style.backgroundImage = "url('" + img.src + "')";
    lens.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
    //execute a function when someone moves the cursor over the image, or the lens:
    lens.addEventListener("mousemove", moveLens);
    img.addEventListener("mousemove", moveLens);
    //and also for touch screens:
    lens.addEventListener("touchmove", moveLens);
    img.addEventListener("touchmove", moveLens);


    //img.addEventListener("mouseenter", result);
    function moveLens(e) {
      var pos, x, y;
      //prevent any other actions that may occur when moving over the image:
      e.preventDefault();
      //get the cursor's x and y positions:
      pos = getCursorPos(e);
      //calculate the position of the lens:
      x = pos.x - (lens.offsetWidth / 2);
      y = pos.y - (lens.offsetHeight / 2);
      //prevent the lens from being positioned outside the image:
      if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
      if (x < 0) {x = 0;}
      if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
      if (y < 0) {y = 0;}
      //set the position of the lens:
      lens.style.left = x + "px";
      lens.style.top = y + "px";
      //display what the lens "sees":
      lens.style.backgroundPosition = "-" + (x * cx + lens.offsetWidth) + "px -" + (y * cy + lens.offsetHeight) + "px";
    }
    function getCursorPos(e) {
      var a, x = 0, y = 0;
      e = e || window.event;
      //get the x and y positions of the image:
      a = img.getBoundingClientRect();
      //calculate the cursor's x and y coordinates, relative to the image:
      x = e.pageX - a.left;
      y = e.pageY - a.top;
      //consider any page scrolling:
      x = x - window.pageXOffset;
      y = y - window.pageYOffset;
      return {x : x, y : y};
    }

}
document.addEventListener("DOMContentLoaded", function(){
    imageZoom("myimage", "myresult");
})

* {box-sizing: border-box;}

  
    
    .img-zoom-container {
      position: relative;
    }
    
    
    .img-zoom-lens {
      position: absolute;
      border: 3px solid #A9A9A9;
      width: 100px;
      height: 100px;
    }

   
  <body>

    <h1>Picture</h1>

    <p>Mouse over the image:</p>

    <div class="img-zoom-container">

      <img id="myimage" src="https://i.imgur.com/50dDbmr.jpg"  width="300" height="200">
    </div>

  </body>

从javascript函数悬停图片弹出div

1 个答案:

更新：

旧答案：