单击时缩放到元素

Question

我希望迪士尼乐园的地图在您单击它时平移/缩放到黄色方块。我是 web 开发的新手，所以任何关于如何用 CSS/JavaScript/jQuery 实现它的指针都将不胜感激。

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

代码笔： https ://codepen.io/dan-freeman/pen/mdVWYox

HTML

<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 => {&nbsp; p.addEventListener("click", e => {&nbsp; &nbsp; figure.style.transformOrigin = `${e.target.getBoundingClientRect().left - e.target.getBoundingClientRect().width / 2}px ${e.target.getBoundingClientRect().top - e.target.getBoundingClientRect().height / 2}px`;&nbsp; &nbsp; if (figure.classList.contains("zoom")) {&nbsp; &nbsp; &nbsp; figure.style.transition = "transform-origin 0.3s, transform 0.3s";&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; figure.style.transition = "transform 0.3s";&nbsp; &nbsp; }&nbsp; &nbsp; figure.classList.add("zoom");&nbsp; });});document.addEventListener("click", (e) => {&nbsp; pins.forEach((p) => {&nbsp; &nbsp; let isClickInside = p.contains(event.target);&nbsp; &nbsp; if (!isClickInside &&&nbsp; &nbsp; &nbsp; !event.target.classList.contains("pin")&nbsp; &nbsp; ) {&nbsp; &nbsp; &nbsp; figure.style.transition = "transform-origin 0.3s, transform 0.3s";&nbsp; &nbsp; &nbsp; figure.style.transformOrigin = '50% 50%';&nbsp; &nbsp; &nbsp; figure.classList.remove("zoom");&nbsp; &nbsp; }&nbsp; });});.container {&nbsp; width: 800px;&nbsp; overflow: hidden;}figure {&nbsp; width: 100%;&nbsp; position: relative;&nbsp; transform-origin: 50% 50%;}figure img {&nbsp; width: 100%;}.pin {&nbsp; position: absolute;&nbsp; height: 75px;&nbsp; width: 75px;&nbsp; background-color: yellow;&nbsp; transition: 0.3s;&nbsp; transform-origin: 50% 50%;}.pin1 {&nbsp; top: 300px;&nbsp; left: 550px;}.pin2 {&nbsp; top: 100px;&nbsp; left: 250px;}.zoom {&nbsp; transform: scale(1.5);}<div class="container">&nbsp; <figure class="figure">&nbsp; &nbsp; <img id="mapImage" src="https://i.redd.it/64xwakxpbae21.jpg">&nbsp; &nbsp; <div class="pin pin1">Click me!</div>&nbsp; &nbsp; <div class="pin pin2">Another Pin</div>&nbsp; </figure></div>另一个：const pins = document.querySelectorAll(".pin");const mapImage = document.querySelector("#mapImage");pins.forEach(p => {&nbsp; p.addEventListener("click", e => {&nbsp; &nbsp; pins.forEach(pin => {&nbsp; &nbsp; &nbsp; pin.classList.remove("pinZoom");&nbsp; &nbsp; });&nbsp; &nbsp; mapImage.style.transformOrigin = `${e.target.getBoundingClientRect().left - e.target.getBoundingClientRect().width / 2}px ${e.target.getBoundingClientRect().top - e.target.getBoundingClientRect().height / 2}px`;&nbsp; &nbsp; if (mapImage.classList.contains("zoom")) {&nbsp; &nbsp; &nbsp; mapImage.style.transition = "transform-origin 0.3s, transform 0.3s";&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; mapImage.style.transition = "transform 0.3s";&nbsp; &nbsp; }&nbsp; &nbsp; mapImage.classList.add("zoom");&nbsp; &nbsp; p.classList.add("pinZoom");&nbsp; });});document.addEventListener("click", (e) => {&nbsp; pins.forEach((p) => {&nbsp; &nbsp; let isClickInside = p.contains(event.target);&nbsp; &nbsp; if (!isClickInside &&&nbsp; &nbsp; &nbsp; !event.target.classList.contains("pin")&nbsp; &nbsp; ) {&nbsp; &nbsp; &nbsp; mapImage.style.transformOrigin = '50% 50%';&nbsp; &nbsp; &nbsp; mapImage.classList.remove("zoom");&nbsp; &nbsp; &nbsp; p.classList.remove("pinZoom");&nbsp; &nbsp; }&nbsp; });});figure{&nbsp; position: relative;&nbsp; width: 800px;&nbsp; height: auto;&nbsp; overflow: hidden;}figure img {&nbsp; width: 100%;&nbsp; transform-origin: 50% 50%;}.pin {&nbsp; position: absolute;&nbsp; height: 75px;&nbsp; width: 75px;&nbsp; background-color: yellow;&nbsp; transition: 0.3s;&nbsp; transform-origin: 50% 50%;}.pin1 {&nbsp; top: 300px;&nbsp; left: 550px;}.pin2 {&nbsp; top: 100px;&nbsp; left: 250px;}.zoom {&nbsp; transform: scale(1.5);}.pinZoom {&nbsp; transform: scale(1.3);}<figure>&nbsp; <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-image-zoom库创建了另一个示例，无需单击。您可以设置缩放、缩放位置、偏移量、缩放宽度和缩放样式。请参阅文档。var options = {&nbsp; width: 800,&nbsp; zoomWidth: 800,&nbsp; /*&nbsp; offset: {&nbsp; &nbsp; vertical: 0,&nbsp; &nbsp; horizontal: 10&nbsp; },&nbsp; scale: 2.0,&nbsp; */&nbsp; zoomPosition: 'original', /* right, top, bottom, left */};new ImageZoom(document.getElementById("img-container"), options);.pin {&nbsp; position: absolute;&nbsp; height: 75px;&nbsp; width: 75px;&nbsp; top: 300px;&nbsp; left: 550px;&nbsp; background-color: yellow;}#img-container {&nbsp; position: relative;}<div id="img-container" style="width: 400px">&nbsp; <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&nbsp;=&nbsp;'translate(-500px,-250px)&nbsp;scale(3)';我相信您仍然需要手动调整translate参数。看看：&nbsp;https ://codepen.io/pen/jOWamjL

Answer 3

<html>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <link rel="stylesheet" href="example.css">&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <div class="big">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="small"></div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </body></html>let small = document.querySelector('.small')let shiftX = nulllet shiftY = nulllet getCoords = (elem) => {&nbsp;&nbsp; &nbsp; let box = elem.getBoundingClientRect()&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; top: box.top + pageYOffset,&nbsp; &nbsp; &nbsp; &nbsp; left: box.left + pageXOffset&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;}}small.addEventListener('mousedown', evt => {&nbsp; evt.preventDefault()&nbsp; small.classList.add('test')&nbsp; small.style.position = 'absolute'&nbsp; let coords = getCoords(small)&nbsp; let shiftX = evt.pageX - coords.left&nbsp; let shiftY = evt.pageY - coords.top})small.addEventListener('mousemove', evt => {&nbsp; evt.preventDefault()&nbsp; small.style.left = evt.pageX - shiftX + 'px'&nbsp; small.style.top = evt.pageY - shiftY + 'px'})small.addEventListener('mouseup', evt => {&nbsp; evt.preventDefault()&nbsp; small.classList.remove('test')}).test {&nbsp; &nbsp; transform: scale(2);}

Answer 4

您需要使用 Jquery 添加一个事件“单击”并切换类“expend”，例如为您的正方形添加样式：https://codepen.io/ZellRDesign/pen/NWxpmddvar square = $(".square")square.click(function(){&nbsp; console.log("salut")&nbsp; square.toggleClass("expend")}).square{&nbsp; height: 100px;&nbsp; width: 100px;&nbsp; background-color: green;&nbsp; transition: .3s;}&nbsp;.square.expend{&nbsp; height: 200px;&nbsp; width: 200px;&nbsp; transition: .3s;&nbsp; background-color: red;}<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; &nbsp; <title>Document</title></head><body>&nbsp; &nbsp; <div class="square"></div>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></body></html>