Question

Fiddle here.

问题描述：

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

不幸的是，它向上滑动到左侧而不是均匀地将图像带入可见性。确定其起源和方向并不能解决问题。有什么想法吗？

Answer 1

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

例如，向background-size: 100% 100%; div添加.box规则可以：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: