单击时使图像填充屏幕

Posted 2023-03-06

【中文标题】单击时使图像填充屏幕

【英文标题】：Make image fill screen on click

【发布时间】：2017-06-11 09:29:43

【问题描述】：

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

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

【问题讨论】：

要将其放在标题上，请在图片的css 中添加top:0;。

【参考方案1】：

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

【讨论】：

那很好，但我正在寻找两件不同的东西。 1）动画从图像的原始位置开始，2）其他图像不动。

@thesecretmaster 制作动画会有点棘手，让我们说图像一直在左边以填满屏幕。 （不难，但很难让动画在现实中看起来很漂亮）也许动画从页面中心开始？

@thesecretmaster 我编辑了我的答案，因此图像在动画期间不会移动，并且动画始终从页面中心开始。如果你能描述一个更好的动画创意，

也许可以使用 css3 翻译将其移动到中心，因为它的增长。