Javascript css背景图像移动

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

jQuery将允许您轻松地做到这一点

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

---

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

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

//仅在第一次加载时设置动画
if（document.referer==null | | document.referer.indexOf（window.location.hostname）<0）{
$（“#logo”）.animate（{
边缘左侧：“100px”，
放松：“摇摆”
}，3000）；//在此处调整持续时间（毫秒）
}否则{
//内部站点链接设置正确的位置
$（“#logo”）.css（{marginLeft:“100px”}）；
}

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

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

然后使用jQuery：

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

那边的人有一个移动的背景。看看他们的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浏览器显示

我所能说的是，在今天的很多浏览器上，这个操作会非常慢。你的用户每次打开你的网站都会感到沮丧。也许你可以用动画gif来达到你想要的效果。那可能会让你更快。