时间戳

首页 > 解决方案 > 如何将背景图像（在样式中设置）替换为 div 中的任何图像？

javascript - 如何将背景图像（在样式中设置）替换为 div 中的任何图像？

问题描述

下面的代码从<style>. 我正在尝试修改它以从 a 中获取任何图像<div>，例如：

<div id="zoom-img">
    <img src="https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459_960_720.png">
</div>

原来的：

// CREDITS TO https://www.cssscript.com/image-zoom-pan-hover-detail-view/
var addZoom = function (target) {
  // (A) FETCH CONTAINER + IMAGE
  var container = document.getElementById(target),
      imgsrc = container.currentStyle || window.getComputedStyle(container, false),
      imgsrc = imgsrc.backgroundImage.slice(4, -1).replace(/"/g, ""),
      img = new Image();

  // (B) LOAD IMAGE + ATTACH ZOOM
  img.src = imgsrc;
  img.onload = function () {
    var imgWidth = img.naturalWidth,
        imgHeight = img.naturalHeight,
        ratio = imgHeight / imgWidth,
        percentage = ratio * 100 + '%';

    // (C) ZOOM ON MOUSE MOVE
    container.onmousemove = function (e) {
     var boxWidth = container.clientWidth,
         rect = e.target.getBoundingClientRect(),
         xPos = e.clientX - rect.left,
         yPos = e.clientY - rect.top,
         xPercent = xPos / (boxWidth / 100) + "%",
         yPercent = yPos / ((boxWidth * ratio) / 100) + "%";
 
      Object.assign(container.style, {
        backgroundPosition: xPercent + ' ' + yPercent,
        backgroundSize: imgWidth + 'px'
      });
    };

    // (D) RESET ON MOUSE LEAVE
    container.onmouseleave = function (e) {
      Object.assign(container.style, {
        backgroundPosition: 'center',
        backgroundSize: 'cover'
      });
    };
  }
};

window.addEventListener("load", function(){
  addZoom("zoom-img");
});
<!DOCTYPE html>
<html>
  <head>
    <title>Follow Zoom Example</title>
    <style>
    #zoom-img {
      width: 600px;
      height: 338px;
      background: url("https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459_960_720.png");
      background-position: center;
      background-size: cover;
    }
    </style>
    <script src="2b-zoom.js"></script>
  </head>
  <body>
    <div id="zoom-img"></div>
  </body>
</html>

当我将样式移动到 CSS 并将图像位置更改为 时<div>，代码停止运行。我的修改：

// CREDITS TO https://www.cssscript.com/image-zoom-pan-hover-detail-view/
var addZoom = function (target) {
  // (A) FETCH CONTAINER + IMAGE
  var container = document.getElementById(target),
      imgsrc = container.currentStyle || window.getComputedStyle(container, false),
      imgsrc = imgsrc.backgroundImage.slice(4, -1).replace(/"/g, ""),
      img = new Image();

  // (B) LOAD IMAGE + ATTACH ZOOM
  img.src = imgsrc;
  img.onload = function () {
    var imgWidth = img.naturalWidth,
        imgHeight = img.naturalHeight,
        ratio = imgHeight / imgWidth,
        percentage = ratio * 100 + '%';

    // (C) ZOOM ON MOUSE MOVE
    container.onmousemove = function (e) {
     var boxWidth = container.clientWidth,
         rect = e.target.getBoundingClientRect(),
         xPos = e.clientX - rect.left,
         yPos = e.clientY - rect.top,
         xPercent = xPos / (boxWidth / 100) + "%",
         yPercent = yPos / ((boxWidth * ratio) / 100) + "%";
 
      Object.assign(container.style, {
        backgroundPosition: xPercent + ' ' + yPercent,
        backgroundSize: imgWidth + 'px'
      });
    };

    // (D) RESET ON MOUSE LEAVE
    container.onmouseleave = function (e) {
      Object.assign(container.style, {
        backgroundPosition: 'center',
        backgroundSize: 'cover'
      });
    };
  }
};

window.addEventListener("load", function(){
  addZoom("zoom-img");
});
#zoom-img {
      width: 600px;
      height: 338px;
      --background: url("https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459_960_720.png");
      --background-position: center;
      --background-size: cover;
    }
<!DOCTYPE html>
<html>
  <head>
    <title>Follow Zoom Example</title>
    <script src="2b-zoom.js"></script>
      <link href="css/styles.css" rel="stylesheet"/>
  </head>
  <body>
    <div id="zoom-img">
        <img src="https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459_960_720.png">
      </div>
  </body>
</html>

标签： javascriptcssimagebackground

解决方案

推荐阅读