Question

我在网站的标题中有图像作为背景。现在，当页面加载时，我想从左向右缓慢移动（约100像素），然后停止。有没有太复杂的方法可以做到这一点？

Answer 1

jQuery允许您轻松完成。

$("#theImage").animate({
    left: "+=100px", 
}, "slow");

Answer 2

您应该检查以确保它仅在第一页加载时动画，而不是从内部站点链接。我喜欢用jquery来做这类事情。

// animate on first load only
if ( document.referrer == null || document.referrer.indexOf(window.location.hostname) < 0 ) {
$("#logo").animate({ 
    marginLeft: "100px",
    easing: 'swing'
}, 3000 );  // adjust your duration here (milliseconds)
} else { 
    // internal site link set the proper position
    $("#logo").css({ marginLeft: "100px"});
}

Answer 3

谢谢，Rap和ghoppe！这是一个有用的暗示。我实际上想要移动背景图像，而不是它的容器，所以我首先在css中设置它的位置：

.top-back-image { background-position: -100px 0px; }

然后使用jQuery：

$(".top-back-image").animate({ 
  backgroundPosition: "0px 0px",
  easing: 'swing'
}, 3000 );

Answer 4

LaunchList的那些人有一个动人的背景。通过他们的CSS查看，这是我发现的。也许它会有所帮助。

#clouds {
    width: 100%;
    height: 650px;
    top: 200px;
    display: block;
    position: fixed;
    background: url(../art/cloud.png) 500px 0 repeat-x;
    -webkit-animation-name: move;
    -webkit-animation-duration: 400s;
    -webkit-animation-iteration-count: infinite;
    z-index: 2;
}

请注意，这仅适用于webkit浏览器。

css背景图像移动

4 个答案: