javascript - 从javascript函数悬停图像弹出div

更新：

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 - 从javascript函数悬停图像弹出div

问题描述

解决方案

更新：

老答案：

推荐阅读