使用jQuery从中心显示和缩放图像
使用jQuery从中心显示和缩放图像
提问于 2017-07-22 02:03:39
当一个按钮被点击时，我希望出现一个图像，放大(缩放)，缩小，然后消失。这是我到目前为止所拥有的-它做了我想要的一部分。单击按钮时，图像确实会放大/缩小，但它是从左上角而不是我想要的中心开始放大/缩小。
其次，我希望图像被隐藏，直到按钮被单击，但这也不起作用。我尝试将最初的显示设置为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'>
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-07-22 02:31:09
我想这对你应该很管用。
//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'>
Stack Overflow用户
发布于 2017-07-22 02:09:32
这就解决了你的问题：
$("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
Stack Overflow用户
发布于 2017-07-22 02:19:51
css位置导致了这种效果。您可以对其进行重构并更改动画，如下所示：
//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'>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45244037
复制相关文章
相似问题
腾讯云开发者
