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

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

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

在 cmets 中提出一些建议后，这里是 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>