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

Image move with mouse position - box issue?(图像随鼠标位置移动 - 框问题?)

问题描述

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

I had originally taken some information from here and expanded on it: onextrapixel.com/examples/interactive-background/index4.html

我改为合并图像以在页面上随鼠标位置移动，但似乎存在一个问题，即顶部框"会切断一些悬停的图像.您可以在这里

I have instead incorporated the image to move with mouse position on the page, however there seems to be an issue with there being a top "box" that cuts off some of the hovered image. You can see it in action on a sample page 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");
});
});

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

I also hope to repeat this for the right side of the page.

在评论中提出一些建议后，这里是 jsfiddle https://jsfiddle.net/yx1w8ysr/#&togetherjs=D4Q1xTfcaO

After some suggesting in the comments here is the jsfiddle https://jsfiddle.net/yx1w8ysr/#&togetherjs=D4Q1xTfcaO

推荐答案

如果事先知道图片的大小，可以固定设置div的大小，不需要使用background-size:contain.而是将其设置为某个相对值(小于 100%)，以便为背景图像的移动提供填充.但是，如果您不知道图像的大小，您应该使用 background-size:contain 来确保您的图像位于您的 div 容器内.然而，使用这种方法，我们无法再控制图像的大小.这意味着您不能使用 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>