Question

我网站的目标网页（http://www.chrisamaddeo.com/）具有全屏背景。我想让它像这个网站标题的示例一样移动（http://www.kaiserair.com/）我有这个代码，HTML，我的网站负责人：

    <!DOCTYPE html>
    <html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
var movementStrength = 25;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("#top-image").mousemove(function(e){
          var pageX = e.pageX - ($(window).width() / 2);
          var pageY = e.pageY - ($(window).height() / 2);
          var newvalueX = width * pageX * -1 - 50;
          var newvalueY = height * pageY * -1 - 25;
          $('#top-image').css("background-position", newvalueX+"px     "+newvalueY+"px");
});

我有这个代码，css，它不起作用：

#top-image {
background:url('https://d3ui957tjb5bqd.cloudfront.net/images/screenshots/products/0/8/8905/red-rocks-park-o.jpg' -50px -25px;
position:fixed ;
top:0;
width:100%;
z-index:0;
}

我的网站是weebly托管，他们的HTML有点不同

Answer 1

实际上，我刚刚尝试复制你的代码： http://codepen.io/chrisboon27/pen/rEDIC

它确实有效，因为它会移动图像。我确实需要为你的jQuery添加一些结束括号，但是当你将代码粘贴到这个问题中时，你可能只是错过了那些。

另外，我查看了您的网站，发现您目前正在使用背景尺寸：封面。这需要你的bg图像并使其适合div - 你不希望那样你想要一些bg延伸到div之外 - 所以我在链接到你的示例中的css你可以看到我用calc来制作bg-图像尺寸为100％宽度+ 50px。我使用了50px，因为你的代码目前向左或向右移动背景图像位置最多25px，因此你需要它比div宽50px。

编辑：如果你使用calc，你也应该包含一个-webkit前缀版本（除非你使用前缀或前缀来添加前缀。这是浏览器支持：http://caniuse.com/calc 如果您需要支持更多浏览器，则需要通过javascript设置背景大小

Answer 2

我发现如果不重新创建并查看这些数字的来源，我就很难理解。然而，我最近为其他人创建了与jQuery非常相似的东西，除了它在div中移动img。虽然找到bg图像尺寸会很棘手 - 在这个例子中你可能会更好地编码它们，但是将它切换为移动背景图像可能不会花费太多时间。

HTML：

<div class="container"><img src="foo.jpg" class="draggable"/>
</div>

jQuery的：

//for each item
$(".container").each(function(){
  //get the container width
  var conWidth = $(this).width();
  //and its height
  var imgHeight = $(this).find("img").height();
  //get the nested img width
  var conHeight = $(this).height();
  //and its height
  var imgWidth = $(this).find("img").width();
  //figure out how much of the image is not visible horizontally
  var excessWidth = imgWidth - conWidth;
  //and how much is not visible vertically
  var excessHeight = imgHeight - conHeight;
  //how far is this container from the left of the page
  var containerPositionLeft = this.offsetLeft;
  //and from the top
  var containerPositionTop = this.offsetTop;

  //when moving mouse over container
  $(this).mousemove(function(e){
    //figure out how many pixels the mouse is from the left edge of the page
    var mouseoffLeftPage = e.pageX;
    //and how many from the top edge of the page
    var mouseoffTopPage = e.pageY;
    //figure out how many pixels the mouse is from the left edge of the page
    var mouseoffLeftPx = mouseoffLeftPage - containerPositionLeft;
    //and how many from the top edge of the page
    var mouseoffTopPx = mouseoffTopPage - containerPositionTop;
    //figure out the distance the mouse is from the left edge as a percentage (kind of - all the way to the right equals 1 not 100)
    var mouseoffLeftPercent = mouseoffLeftPx/conWidth;
    //do the same for height
    var mouseoffTopPercent = mouseoffTopPx/conHeight;
    //times the 'percentage' value by the amount of image hidden - so if your conatiner is 200px wide, your image 300px wide nd your mouse is half way across this value would be 0.5*100 which would give you 50 - which is exactly half the amount of image that is missing.
    //note this gets set as a minus value as we will be using a minus number to shift the image around.
    var setnewWidth = -(mouseoffLeftPercent * excessWidth);
    //do the same for the height
    var setnewHeight = -(mouseoffTopPercent * excessHeight);
    //add the values as css (using transform(translate) as it's more performant and does subpixel rendering so looks smoother [or does it? it does in animations but seems as my js is not technically animating it it might not make a difference in that respect] - could set the top,left version as fallback for unsupporting browsers but ie9 supports transforms anyway so i dont care.)
    $(this).find("img").css({"transform" : "translate("+ setnewWidth+"px ,"+setnewHeight+"px)" });
    //$(this).find("img").css({"left" : setnewWidth+"px", "top" : setnewHeight+"px" });
  }); 

});

不能直接回答代码中没有的内容，但会显示一个示例（包含对正在发生的事情的评论）如何完成 - 请注意我的版本不依赖于您知道任何对象的宽度或高度，可以在一个页面上的多个项目上运行 - 也不必将其放在页面的最顶部。它确实假设图像比它的容器大 - 如果它不大，图像只是在它内部移动。您可以通过连续执行更多计算来减少变量的数量，我只是希望它尽可能容易地读取逻辑。

样本： http://codepen.io/chrisboon27/pen/BhkJq

Answer 3

比这简单，您可以确保CSS位置设置为“固定”，因此无论您在页面上的哪个位置，它始终是从顶部开始的0px。

用我的光标移动背景

3 个答案: