单击使图像填充屏幕 [英] Make image fill screen on click

问题描述

我有一个带有标题和一些图像作为内容的布局.我想单击任何图像时，它都会扩展以适合带有过渡的屏幕. jQuery和JS是公平的游戏.这就是我所拥有的，由于position的更改，我无法使它与过渡一起使用.它也应该覆盖标题，而不会.

I have a layout with a header and a few images as content. I would like when any image is clicked, it expands to fit the screen with a transition. jQuery and JS are fair game. Here is what I have, I just can't get it to work with transition because of the position changes. It also should cover the header and doesn't.

 $( document ).ready(function() {
     $( "main img" ).click(function() {
         $(this).toggleClass("click");
     });
 });

html, body {
  height:100%;
  margin:0;
  padding:0;
}

header {
  height:25%;
  width:100%;
  background-color:blue;
}

main {
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
}

main img {
  padding:1em;
  transition:1s;
}

main img.click {
  position:absolute;
  width:100%;
  height:auto;
  padding:0;
  transition:1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
</header>
<main>
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
</main>

推荐答案

$(document).ready(function() {

    $("img").click(function() {
        if($(this).width() == "100") {
            $($(this).clone(true)).insertAfter(this);
            $(this).css({"position" : "fixed", "z-index" : "3"});
            $(this).animate({"width" : $(window).width()-32, "height" : $(window).height()-32, "top" : "0px"}, 1000);
        }
        else {
            $(this).animate({"width" : "0px", "height" : "0px", "top" : ((($(window).height()-32)/2)-50)}, 500, function() { 
                $(this).remove();
            });
        }
    });
});

html, body {
  height:100%;
  margin:0;
  padding:0;
}

header {
  height:25%;
  width:100%;
  background-color:blue;
}

main {
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
}

main img {
  padding:1em;
}

main {
  position:absolute;
  width:100%;
  height:auto;
  padding:0;
}

img {
  width: 100px;
  height: 100px;
  z-index: 2;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
</header>

<main>
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
</main>

这篇关于单击使图像填充屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！