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

2022-01-22 00:00:00 hover jquery javascript html css

我最初从这里获取了一些信息并对其进行了扩展: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 来移动图像(因为尺寸适合其父级，移动会导致图像被切断).

If you know the image's size beforehand, you can set the size of your div fixedly and don't need to use background-size:contain. Instead set it to some relative value (less than 100%) so that you have a padding around for the movement of the background image. However if you don't know the size of the image, you should use background-size:contain to ensure that your image sits right inside your div container. However with this approach we cannot control the size of the image anymore. That means you cannot use background-position to move the image around (because the size fits its parent, moving will cause the image be cut off).

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

So you need some another wrapper/container and move your inner div (.top-image) instead of changing the 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>

相关文章