jquery - css, jquery : 背景图像定位

Question

一张大图（图片名称：image.jpg）将用作div.

部分图像（假设 70%）将可见，然后图像将缓慢向右移动。在剩余部分全部可见后，它将开始向左移动。

如何通过跨浏览器兼容性实现这一目标？

标记代码：

<div class="my_div"></div>

<style type="text/css">
.my_div{
     background-image: url('/img/image.jpg');
 }
</style>

Answer 1

放置它做这样的事情

.my_div{
  background: url(img/image.jpg) no-repeat top right;
  margin-top: 10px;
  margin-right: 10px;
}

要制作动画，只需使用 jquery http://api.jquery.com/animate/为边距制作动画

$(".my_div").animate({
    marginRight: "100px"
  }, 1500 );

我没有对此进行测试，但这样的事情应该可以解决问题

要启动它，请创建一个 ID="button" 的按钮并单击它。

<input type="button" id="button" value="animate me" />

和 js

$("#button").click(function(){
  $(".my_div").animate({
    marginRight: "100px"
  }, 1500 );
});

Answer 2

$("#block").animate({
    marginLeft: "100px"
}, 1500, function(){
    $(this).animate({
         marginRight: "100px"
    });
});

Answer 3

看到这个：http: //jsfiddle.net/fwyJz/2/

$(function() {
   animate();
  setInterval(function() { animate();}, 7000);
});
function animate()
{
 $(".my").animate({
    backgroundPosition: "(-200px 0px)"
}, 3500, function() {
    $(this).animate({
        backgroundPosition: "0px 0px"
    }, 3500).end();
});
}

​这使用了一个js文件：jquery.bgpos