Question

我正在创建一个显示动画gif作为启动画面的网站。不幸的是，在iPhone上观看时水平尺寸不一致。首次加载网站时，动画gif会显示在屏幕中心的右侧。如果网站重新加载，那么它似乎工作正常。

建议非常感谢：）

以下是代码：

HTML

<div id="overlay">
<div id="overlay-content"><img src='videosmall.gif'></div>
</div>

CSS

#overlay {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: rgb(222, 222, 222);
}

#overlay-content {
  position: fixed;
  display: none;
}

JavaScript（jQuery）

function main() {
  $('#overlay').show();
  $('#overlay-content').show().center();
}


setTimeout(function() {
  $("#overlay").fadeOut();
  $('.i3section').fadeIn(5000);
}, 5000);



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

$(document).ready(main);

Answer 1

您应该尝试通过使用CSS来定位叠加层及其内容来避免此问题 +动画会更顺畅

示例：

HTML

<div id="overlay">
  <img src='https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66'>
</div>

CSS

#overlay {
  /* Display overlay in fullscreen */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* Center it's content */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Add nice animation */
  transition: visibility 0.4s, opacity 0.4s;

  /* While it's hidden */
  visibility: hidden;
  opacity: 0;
}
#overlay.open {
  /* While it's shown */
  visibility: visible;
  opacity: 1;
}
#overlay img {
  /* Styling image */
  display: block;
  width: 128px;
  height: auto;
}

JS

/* Showing the overlay */
$('#overlay').addClass('open');

setTimeout(function () 
{
  /* Hiding the overlay */
  $('#overlay').removeClass('open');
}, 3000);

FIDDLE： https://jsfiddle.net/JacobDesight/vkga6mhk/

防溅屏水平定位不一致

1 个答案: