单击时缩放到元素

Question

我希望迪士尼乐园的地图在您单击它时平移/缩放到黄色方块。我是 web 开发的新手，所以任何关于如何用 CSS/JavaScript/jQuery 实现它的指针都将不胜感激。编辑：我用更接近实际应用程序的东西替换了我的示例，以避免混淆。代码笔： https ://codepen.io/dan-freeman/pen/mdVWYoxHTML<img src="https://i.redd.it/64xwakxpbae21.jpg"><div class="pin">Click me!</div>-CSSimg {    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-image-zoom库创建了另一个示例，无需单击。您可以设置缩放、缩放位置、偏移量、缩放宽度和缩放样式。请参阅文档。

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);

}

Answer 4

您需要使用 Jquery 添加一个事件“单击”并切换类“expend”，例如为您的正方形添加样式：

https://codepen.io/ZellRDesign/pen/NWxpmdd

var square = $(".square")

square.click(function(){

  console.log("salut")

  square.toggleClass("expend")

})

.square{

  height: 100px;

  width: 100px;

  background-color: green;

  transition: .3s;

} 

.square.expend{

  height: 200px;

  width: 200px;

  transition: .3s;

  background-color: red;

}

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div class="square"></div>

    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>

</html>