单击Panzoom元素

Question

当你点击迪斯尼乐园的地图时，我要把它放大/放大到黄色的广场。我对web很陌生，所以任何关于如何用CSS/JavaScript/jQuery实现这一点的建议都会受到极大的赞赏。

编辑：，我用更接近实际应用的东西代替了我的例子，以避免混淆。

Codepen: https://codepen.io/dan-freeman/pen/mdVWYox

<img src="https://i.redd.it/64xwakxpbae21.jpg">
<div class="pin">Click me!</div>-

CSS

img {
    width: 800px;
    height: auto;
}

.pin {
    position: absolute;
    height: 75px;
    width: 75px;
    top: 300px; /*Solution should use these coordinates*/
    left: 550px;
    background-color: yellow;
}

在单击之前单击

点击后的

​

Answer 1

我为你的案子做了个例子。这确实解决了你的问题。您可以在.zoom类中给出您想要的比例大小。我给了它1.5。

​

const pins = document.querySelectorAll(".pin");
const figure = document.querySelector(".figure");
const mapImage = document.querySelector("#mapImage");

pins.forEach(p => {
  p.addEventListener("click", e => {

    figure.style.transformOrigin = `${e.target.getBoundingClientRect().left - e.target.getBoundingClientRect().width / 2}px ${e.target.getBoundingClientRect().top - e.target.getBoundingClientRect().height / 2}px`;


    if (figure.classList.contains("zoom")) {
      figure.style.transition = "transform-origin 0.3s, transform 0.3s";
    } else {
      figure.style.transition = "transform 0.3s";
    }

    figure.classList.add("zoom");
  });
});

document.addEventListener("click", (e) => {
  pins.forEach((p) => {
    let isClickInside = p.contains(event.target);
    if (!isClickInside &&
      !event.target.classList.contains("pin")
    ) {
      figure.style.transition = "transform-origin 0.3s, transform 0.3s";
      figure.style.transformOrigin = '50% 50%';
      figure.classList.remove("zoom");
    }
  });
});

.container {
  width: 800px;
  overflow: hidden;
}

figure {
  width: 100%;
  position: relative;
  transform-origin: 50% 50%;
}

figure img {
  width: 100%;
}

.pin {
  position: absolute;
  height: 75px;
  width: 75px;
  background-color: yellow;
  transition: 0.3s;
  transform-origin: 50% 50%;
}

.pin1 {
  top: 300px;
  left: 550px;
}

.pin2 {
  top: 100px;
  left: 250px;
}

.zoom {
  transform: scale(1.5);
}

<div class="container">
  <figure class="figure">
    <img id="mapImage" src="https://i.redd.it/64xwakxpbae21.jpg">

    <div class="pin pin1">Click me!</div>
    <div class="pin pin2">Another Pin</div>
  </figure>
</div>

​

另一个：

​

const pins = document.querySelectorAll(".pin");
const mapImage = document.querySelector("#mapImage");

pins.forEach(p => {
  p.addEventListener("click", e => {

    pins.forEach(pin => {
      pin.classList.remove("pinZoom");
    });

    mapImage.style.transformOrigin = `${e.target.getBoundingClientRect().left - e.target.getBoundingClientRect().width / 2}px ${e.target.getBoundingClientRect().top - e.target.getBoundingClientRect().height / 2}px`;


    if (mapImage.classList.contains("zoom")) {
      mapImage.style.transition = "transform-origin 0.3s, transform 0.3s";
    } else {
      mapImage.style.transition = "transform 0.3s";
    }


    mapImage.classList.add("zoom");
    p.classList.add("pinZoom");

  });
});

document.addEventListener("click", (e) => {
  pins.forEach((p) => {
    let isClickInside = p.contains(event.target);
    if (!isClickInside &&
      !event.target.classList.contains("pin")
    ) {
      mapImage.style.transformOrigin = '50% 50%';
      mapImage.classList.remove("zoom");
      p.classList.remove("pinZoom");
    }
  });
});

figure{
  position: relative;
  width: 800px;
  height: auto;
  overflow: hidden;
}

figure img {
  width: 100%;
  transform-origin: 50% 50%;
}

.pin {
  position: absolute;
  height: 75px;
  width: 75px;
  background-color: yellow;
  transition: 0.3s;
  transform-origin: 50% 50%;
}

.pin1 {
  top: 300px;
  left: 550px;
}

.pin2 {
  top: 100px;
  left: 250px;
}

.zoom {
  transform: scale(1.5);
}

.pinZoom {
  transform: scale(1.3);
}

<figure>
  <img id="mapImage" src="https://i.redd.it/64xwakxpbae21.jpg">
</figure>

<div class="pin pin1">Click me!</div>
<div class="pin pin2">Another Pin</div>

​

我还用js图像缩放库创建了另一个示例，不需要单击。可以设置缩放、缩放位置、偏移、缩放宽度和缩放样式。见文件。

​

var options = {
  width: 800,
  zoomWidth: 800,
  /*
  offset: {
    vertical: 0,
    horizontal: 10
  },
  scale: 2.0,
  */
  zoomPosition: 'original', /* right, top, bottom, left */
};

new ImageZoom(document.getElementById("img-container"), options);

.pin {
  position: absolute;
  height: 75px;
  width: 75px;
  top: 300px;
  left: 550px;
  background-color: yellow;
}

#img-container {
  position: relative;
}

<div id="img-container" style="width: 400px">
  <img src="https://i.redd.it/64xwakxpbae21.jpg" />
<div>

<script src="https://unpkg.com/js-image-zoom@0.7.0/js-image-zoom.js"></script>

​

Answer 2

也许像javacript这样简单的东西，点击时添加css就可以了.

document.getElementsByTagName('img')[0].style.transform = 'translate(-500px,-250px) scale(3)';

我相信您仍然需要手动调整translate参数。查看一下：https://codepen.io/pen/jOWamjL

Answer 3

<html>
    <head>
        <link rel="stylesheet" href="example.css">
    </head>
    <body>
        <div class="big">
            <div class="small"></div>
        </div>
    </body>
</html>

let small = document.querySelector('.small')

let shiftX = null
let shiftY = null

let getCoords = (elem) => { 
    let box = elem.getBoundingClientRect()
      return {
        top: box.top + pageYOffset,
        left: box.left + pageXOffset
      }
   }
}

small.addEventListener('mousedown', evt => {
  evt.preventDefault()
  small.classList.add('test')
  small.style.position = 'absolute'
  let coords = getCoords(small)
  let shiftX = evt.pageX - coords.left
  let shiftY = evt.pageY - coords.top
})

small.addEventListener('mousemove', evt => {
  evt.preventDefault()
  small.style.left = evt.pageX - shiftX + 'px'
  small.style.top = evt.pageY - shiftY + 'px'
})

small.addEventListener('mouseup', evt => {
  evt.preventDefault()
  small.classList.remove('test')
})

.test {
    transform: scale(2);
}