Question

单击按钮时，我希望显示图像，放大（缩放），缩小，然后消失。这是我到目前为止所做的 - 它是我想要的一部分。单击按钮时图像会放大/缩小，但是从左上角而不是我想要的中心进行放大/缩小。

其次，我希望隐藏图像直到单击按钮，但这也不起作用。我尝试将显示最初设置为none，然后切换类以更改按钮单击时的可见性。没有快乐。

有人能指出我正确的方向吗？我错过了一些小东西吗？

感谢您的帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我认为这应该适合你。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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％的不同，因此(100 - 300) / 2 = -100

Answer 3

css位置会导致此效果。你可以重构这个并改变这样的动画：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用jQuery从中心显示和缩放图像

3 个答案: