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

Question

问题描述：

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

不幸的是，它向上和向左滑动，而不是使图像均匀可见。定义它的起源和方向并不能解决问题。有什么想法吗？

Answer 1

您只需要使用 Stretch and scale a CSS image in the background - with CSS only 的答案中描述的技术即可。

例如，将 background-size: 100% 100%; 规则添加到您的 .box div 有效：

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

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

Using jQuery .scale to evenly reveal elements from their center

html

javascript

css

jquery

scale