Question

我最初从这里获取了一些信息并对其进行了扩展：onextrapixel.com/examples/interactive-background/index4.html

我已将图像合并到页面上的鼠标位置移动，但是似乎存在一个顶部“盒子”切断一些悬停图像的问题。您可以在示例页面here

上查看它

我的css：

.top-image {
    background:url('http://i.imgur.com/wZRaMrB.png');
    position:absolute ;
    top:400px;
    width:100%;
    z-index:0;
   height:100%;
   background-repeat: no-repeat;
}

我的js：

$(document).ready(function() {
    var movementStrength = 25;
    var height = movementStrength / $(window).height();
    var width = movementStrength / $(window).width();
    $("body").mousemove(function(e){
        var pageX = e.pageX - ($(window).width() / 2);
        var pageY = e.pageY - ($(window).height() / 2);
        var newvalueX = width * pageX * -1 - 25;
        var newvalueY = height * pageY * -1 - 50;
        $('.top-image').css("background-position", newvalueX+"px     "+newvalueY+"px");
});
});

我也希望在页面的右侧重复此操作。

在这里的评论中有一些建议是jsfiddle https://jsfiddle.net/yx1w8ysr/#&togetherjs=D4Q1xTfcaO

Answer 1

如果您事先知道图像的大小，则可以固定设置div的大小，而不需要使用background-size:contain。而是将其设置为某个相对值（小于100％），以便为背景图像的移动提供填充。但是，如果您不知道图像的大小，则应使用background-size:contain确保图像位于div容器内。然而，通过这种方法，我们无法再控制图像的大小。这意味着您无法使用background-position移动图像（因为尺寸适合其父级，移动将导致图像被切断）。

所以你需要另一个包装器/容器并移动你的内部div（.top-image）而不是改变background-position。

以下是详细代码：

var movementStrength = 25;
var w = $(window).width();
var h = $(window).height();

$(window).mousemove(function(e) {
  var pageX = (e.pageX - w / 2) / w / 2;
  var pageY = (e.pageY - h / 2) / h / 2;
  var newvalueX = pageX * movementStrength;
  var newvalueY = pageY * movementStrength;
  $('.top-image').css({
    left: newvalueX + 'px',
    top: newvalueY + 'px'
  });
});

.container {
  padding: 25px;
  width: 35%;
  height: 35%;
  position: absolute;
  top: 400px;
}

.top-image {
  background: url('http://i.imgur.com/wZRaMrB.png');
  position: absolute;
  background-size: contain;
  width: 100%;
  z-index: 0;
  height: 100%;
  background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class="top-image"></div>
</div>

图像移动与鼠标位置 - 框问题？

1 个答案: