>

버튼을 클릭하면 이미지가 나타나고 확대 (축소)되고 축소 된 다음 사라집니다. 여기 제가 지금까지 가지고있는 것이 있습니다-그것은 내가 원하는 것의 일부를합니다. 버튼을 클릭하면 이미지가 확대/축소되지만 원하는 중앙이 아니라 왼쪽 상단에서 이미지가 확대됩니다.

둘째, 버튼을 클릭 할 때까지 이미지를 숨기고 싶지만 작동하지 않습니다. 처음에는 디스플레이를 none으로 설정 한 다음 버튼 클릭시 가시성을 변경하기 위해 클래스를 전환하려고했습니다. 기쁨이 없습니다.

누군가가 올바른 방향으로 나를 가리킬 수 있습니까? 나는 작은 것을 놓치고 있습니까?

도움을 주셔서 감사합니다.

//Function that centers in viewport
jQuery.fn.center = function() {
  this.css("position", "absolute");
  this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
  this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
  return this;
}
//Center
$("img").center()
//Zoom in / out
$("button").on("click", function() {
  $("img").addClass("visible").center().animate({height: "300px"}, 600).delay(100).animate({height: "100px"},600).removeClass("visible");
});

img {
  height: 100px;
	/* display:none; */
}
.visible{
  display: inline
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Click Me!</button>
<img src='http://placeholder.pics/svg/300'>

  • 답변 # 1

    이것이 당신에게 효과가 있다고 생각합니다.

    //Function that centers in viewport
    jQuery.fn.center = function() {
      this.css("position", "absolute");
      this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
      this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
      return this;
    }
    $("img").on('animationend', function(e) { 
        $("img").removeClass("big").css({"display": "none"});
      });
    //Center
    $("img").center()
    //Zoom in / out
    $("button").on("click", function() {
      $("img").addClass("big").css({"display": "initial"});
    });
    
    

    img {
      height: 100px;
      display: none;
    }
    .big {
      animation-name: example;
      animation-duration: 1s;
    }
    @keyframes example {
        0%   {transform: scale(1,1);}
        50%  {transform: scale(2,2);}
        100% {transform: scale(1,1);}
    }
    
    

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button type="button">Click Me!</button>
    <img src='http://placeholder.pics/svg/300'>
    
    

  • 답변 # 2

    문제가 해결되었습니다 :

    $("button").on("click", function() {
      $("img").addClass("visible").center().animate({height: "300px", margin: "-100px"}, 600).delay(100).animate({height: "100px", margin: "0px"},600).removeClass("visible");
    });
    
    

    높이를 변경하면 여백도 관리해야합니다. 가장 쉬운 방법은 이전 크기와 새 크기의 차이를 50 %로 계산하는 것입니다.

  • 답변 # 3

    CSS 위치가이 효과를 발생시킵니다. 이것을 리팩토링하고 다음과 같이 애니메이션을 변경할 수 있습니다 :

    (100 - 300) / 2 = -100
    
    

    //Function that centers in viewport
    jQuery.fn.center = function() {
      this.css("position", "absolute");
      this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
      this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
      return this;
    }
    //Center
    //$("img").center()
    //Zoom in / out
    $("button").on("click", function() {
      $("img").addClass("visible").animate({'zoom': 1.2  }, 600).delay(100);
      $("img").addClass("visible").animate({ 'zoom': 1}, 600);
    });
    
    

    img {
      height: 100px;
    	/* display:none; */
    }
    .visible{
      display: inline
    }
    
    

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button">Click Me!</button> <img src='http://placeholder.pics/svg/300'>

관련 자료

  • 이전 python - OpenCV는 유사한 객체 간의 차이점을 식별합니다
  • 다음 c# - winforms listview에서 특정 값을 가진 항목 제거