Question

我试图让这项工作破碎。我希望我的页面的正文背景能够横向滚动。

<html>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(function(){
    $("body").animate({backgroundPosition : "500 0"}, 2000);
});
</script>

<body style="background-image: url('bg.jpg')">

</body>

</html>

Answer 1

jQuery无法为需要2个或更多值的css属性设置动画。

您可以使用backgroundPositionY和backgroundPositionX垂直和水平设置动画：

$("body").animate({backgroundPositionY : "500px"}, 2000);

<强> DEMO

Answer 2

为了在所有浏览器中创建此效果，您可以尝试不同的方法;

<强> HTML

<body>
  <div class="background" id="background"></div>
  <div class="page-content">Put your content here</div>
</body>

<强> CSS

.background {
  background-image:url('bg.jpg');
  position:absolute;
  z-index:1;
}
.page-content {
  z-index:2;
  position:relative;
}

<强>的jQuery

$(document).ready(function(){
  var windowHeight = $(window).height();
  var windowWidth = $(window).width();
  var animateWidth = '500'        
  $('#background').height(windowHeight).width(windowWidth)
    .animate({
      left: animateWidth + 'px',
      width: (windowWidth - animateWidth) + 'px'
    }, 2000);
});

以下是一个工作示例：http://jsfiddle.net/HHgKW/3/

Jquery：身体背景滚动到左边？

2 个答案: