Empecé a trabajar en Java avanzado unos días antes (lo sé, demasiado tarde para empezar). Estoy atascado con una tarea específica de hacer que una imagen (que está presente en el cuerpo de la página html) la arroje, la muestre o la haga zoom en pantalla completa.
He estado buscando durante un tiempo, pero ¿hay alguna manera de hacer una imagen si se hace clic en ella, se agrandaría en la pantalla de los usuarios una vez y luego volvería a la normalidad?
<div id="largePic"></div> para mostrar la imagen a pantalla completa.<div class="img-block"><img src=""></div> para mostrar imágenes de tamaño normal.<div class="img-block"> , escriba img src en <div id="largePic"> .active a <div id="largePic"></div> cuando haga clic en <div class="img-block"> , elimine active cuando haga clic en <div id="largePic"></div>javascript
let imgBlocks = document.getElementsByClassName("img-block"), largePic = document.getElementById('largePic') for (let i = 0; i < imgBlocks.length; i++) { imgBlocks[i].onclick = function (e) { imgZoom(e) } } function imgZoom(e) { let src = e.target.src largePic.classList.add('active') document.getElementById('pic').innerHTML = `<img src="${src}">` } largePic.onclick = function () { largePic.classList.remove('active') }O usa jquery
$(".img-block").click(function () { $(".largePic").addClass("active"); $("#pic").html(`<img src="${$(this).find("img").attr("src")}">`); }); $(".largePic").click(() => { $(".largePic").removeClass("active"); }); $(".img-block").click(function () { $("#largePic").addClass("active"); $("#pic").html(`<img src="${$(this).find("img").attr("src")}">`); }); $("#largePic").click(() => { $("#largePic").removeClass("active"); }); div.img-block { box-sizing: border-box; width: 100%; } div.img-block img { display: block; margin: 0 auto; } div.largePic { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: -1; } div.largePic div#pic { width: 90%; } div.largePic div#pic img { width: 100%; display: block; margin: 0 auto; } div.largePic div#pic, div.largePic { opacity: 0; transition: 0.4s; } div.largePic.active { z-index: 10000; } div.largePic.active div#pic, div.largePic.active { opacity: 1; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div id="largePic" class="largePic"> <div id="pic"></div> </div> <div class="img-block"> <img width="60%" src="https://img.freepik.com/free-photo/milford-sound-new-zealand-travel-destination-concept_53876-42945.jpg?w=2000"> </div> <div class="img-block"> <img width="60%" src="https://pikwizard.com/photos/7dfd148fb38cdc9da4a1913244af4a5f-s.jpg"> </div> </body>` texto fuerte