Question

这是关于堆栈溢出的第一个问题，我是javascript / jquery的新手，所以我会尽力解释我的问题。

我有两个图像在x轴上动画到浏览器的中心，这些图像在加载页面时工作正常。我在加载后调整浏览器大小时出现问题。元素不会停留在浏览器的中心，并且在我刷新页面之前偏离中心，并且它再次正常工作。

我想知道是否有任何技术可以根除这个问题？

网站可在www.puzzletest.click上查看

提前谢谢。

<div id="fullpage">
    <div id="section1" class="section">
        <div>
            <img src="img/softsellcloud.png" class="ss-cloud" alt="Soft Sell Online - Business Automation Software">
            <img src="img/softselltext.png" class="ss-text" alt="Soft Sell Online - Business Automation Software">
        </div>
        <div class="caption">
            <h1>Business Automation Software.</h1>
            <h2>We Help Companies Work Smarter!</h2>
            <a href="tel:01772 842112"><img src="img/phone-log.png" alt="Phone Us Now"></a>
        </div>
        <div>
            <img src="img/scroll-arrow.png" alt="Scrolling Arrow" id="arrow1" class="arrow">
        </div>
    </div>

我的javascript代码就是这个......

$(document).ready(function() {
        $('#fullpage').fullpage();
    });

$(document).ready(function() {
    $(".ss-cloud").animate({
    left: $(".ss-cloud").parent().width() / 2 - $(".ss-cloud").width() / 2
    }, 2000);
    });

$(document).ready(function() {
    $(".ss-text").animate({
    right: $(".ss-text").parent().width() / 2 - $(".ss-text").width() / 2
}, 2000);
});

$(document).ready(function() {
    $( ".caption" ).delay(2000).animate({
    opacity: 1,
  }, 3000, function() {
  });
});

Answer 1

您需要使用.resize函数，以便每次调整窗口大小时都会触发脚本。

$(window).resize(function(){
// Your code here

}）;

另见： https://api.jquery.com/resize/

javascript居中元素的问题

1 个答案: