0
votes

Panzoom à l'élément en cliquant

Je veux que la carte de Disneyland effectue un panoramique / zoom sur le carré jaune lorsque vous cliquez dessus. Je suis nouveau dans le développement Web, donc tout pointeur sur la façon de mettre en œuvre cela avec CSS / JavaScript / jQuery serait extrêmement apprécié.

Modifier: J'ai remplacé mon exemple par quelque chose de plus proche de l'application réelle. éviter toute confusion.

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

HTML

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

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

CSS

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

Avant le clic Après le clic

javascript jquery html css css-transforms

1 commentaires

@OP Si cela ne vous dérange pas de me demander, qu'avez-vous utilisé pour générer ces aperçus Chrome avec l'ombre de la boîte? Ça semble très sympa!

4 Réponses :

-1
votes

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

4 commentaires

Dans ce cas, j'ai besoin du carré bleu pour zoomer / faire un panoramique sur le carré vert de la même manière que Google Maps zoom / effectue un panoramique vers des emplacements spécifiques lorsque vous appuyez dessus. Il semble que ce script ne fait que agrandir le carré vert.

mm, votre besoin de glisser-déposer

Je ne connais pas cette fonctionnalité

Je ne veux pas faire glisser et déposer le carré, je veux faire un zoom dessus

-1
votes

vous devez ajouter un evenement "click" avec Jquery et basculer la classe "Expense" par exemple pour ajouter du style à votre carré:

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

<!DOCTYPE html>
<html lang="en">
<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>

.square{
  height: 100px;
  width: 100px;
  background-color: green;
  transition: .3s;
} 

.square.expend{
  height: 200px;
  width: 200px;
  transition: .3s;
  background-color: red;
}

var square = $(".square")

square.click(function(){
  console.log("salut")
  square.toggleClass("expend")
})

1 commentaires

Il semble que cet extrait de code ne fait que agrandir le carré, dans mon application, je dois diviser pour zoomer dessus

1
votes

Peut-être que quelque chose d'aussi simple qu'un javacript ajoutant un css lors d'un clic fera l'affaire ...

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

Je crois que vous devrez toujours modifier manuellement les paramètres translate . Vérifiez-le: https://codepen.io/pen/jOWamjL

3 commentaires

C'est assez élégant. Savez-vous s'il existe un moyen de sélectionner une transformation (-500px, -250px) sur les coordonnées de la boîte (300px, 550px)?

La façon dont je l'ai fait était: j'ai enlevé 50px des propriétés gauche et top du div pin, puis multiplié par -1 . Je ne sais pas si cela fonctionnerait pour chaque épingle dont vous auriez besoin - je ferais attention aux broches proches des frontières.

Merci @Rafael. J'ai fini par attribuer la prime à dgknca parce que je suis plus à l'aise avec CSS mais je pense que c'est aussi une solution très élégante

1
votes

J'ai créé un exemple pour votre cas. Cela résout littéralement votre problème. Vous pouvez donner à la taille de l'échelle ce que vous voulez dans la classe .zoom . Je lui ai donné 1.5.

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

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

#img-container {
  position: relative;
}

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

Un autre:

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

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

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

J'ai également créé un autre exemple avec js-image-zoom bibliothèque et aucun clic nécessaire. Vous pouvez définir l'échelle, la position du zoom, le décalage, la largeur du zoom et le style de zoom. Consultez la documentation.

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

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

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

1 commentaires

C'est plutôt cool, mais dans mon cas, j'ai besoin que le conteneur s'aligne sur les cases jaunes qui représentent les points d'intérêt, pas seulement pour suivre la souris