使用jQuery .scale从中心均匀地显示元素

Using jQuery .scale to evenly reveal elements from their center

本文关键字：显示 元素 jQuery scale 使用      更新时间：2023-09-26

拨动这里

问题描述:

我试图使用jQuery UI scale的效果显示一个大的元素(div与背景图像)从它的中心点，并有它向外扩展均匀横跨屏幕。我想要的效果是让它看起来好像元素正在向你放大。

不幸的是，它向上和向左滑动，而不是均匀地使图像可见。确定它的起源和方向并不能解决问题。什么好主意吗?

您只需要使用答案中描述的技术来拉伸和缩放背景中的CSS图像-仅使用CSS。

例如，将background-size: 100% 100%;规则添加到.boxdiv中:

// Small plugin to center any element.
jQuery.fn.center = function() {
  this.css("position", "absolute");
  this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
  this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
  return this;
}
// Call the .center(); function to the ".box" div.
// This can be used to center anything. just use .center(); on any element.
$('.box').center();
// When the window is resized, center the div to adjust to the resize.
$(window).resize(function() {
  $('.box').center();
});
// Now call the jQuery UI animation.
$('.box').show("scale", {
  percent: 100
}, 1000, function() {
  // on Animation Complete, do something.
});
.box {
  width: 820px;
  height: 461px;
  background: url('http://www.techulator.com/attachments/Resources/10090-1015-Transforming-Windows-Iron-Man-s-JARVIS-Theme-Interface.png') no-repeat;
  background-size: 100% 100%; /** this was added **/
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="box"></div>

相关文章：