跟随鼠标的图像

Question

我正在尝试创建一个缩放的视觉框，可以通过鼠标跟随将 Y avis 上的视觉对象从上到下移动。

我的问题是我需要将导航限制在视觉对象的顶部和底部，以避免在使用鼠标导航到极端时图像上方和下方出现空白。

这是我的代码：

HTML

<div class="follower-container">
  <img src="https://picsum.photos/400/600?image=1083" class="follower-image" alt="" />
</div>

CSS

.follower-container {
    position: relative;
    height: 100vh;
    max-width: 600px;
    overflow: hidden;
    border: 1px solid blue;
}

.follower-image {
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    width: 100%;
    display: block;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
}

JS

var mouse = { x:0, y:0 };
var image_position = { x:0, y:0 };

// Get mouse position
function getMouse(e){
    mouse.x = e.clientX || e.pageX;
    mouse.y = e.clientY || e.pageY;
}

$('.follower-container').mousemove(function(e){
        getMouse(e);
});

// Move visual regarding mouse position
function moveImage(){
    var distY = mouse.y - image_position.y;
    image_position.y += distY/5;

    $('.follower-image').css({
        'top': image_position.y + "px"
    });
}

setInterval(moveImage, 20);

我的 jsfiddle：https://jsfiddle.net/balix/hc2atzun/22/

Answer 1

您可以使用Math.min()和Math.max()的组合来限制位置在一定范围内。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min

Math.max() 将 return 较大的 两个传递的数字：

Math.max(0, 100); // 100
Math.max(12, 5); // 12

Math.min() 将return 较小的 两个传递的数字：

Math.min(0, 100); // 0
Math.min(12, 5); // 5

通过组合它们，您可以将给定数字限制在一个范围内。如果在范围之外，它会在范围的末端最大化（或最小化）：

function keepInRange(n, minNum, maxNum) {
  return Math.min(Math.max(minNum, n), maxNum);
}
keepInRange(-12, 0, 100); // 0
keepInRange(30, 0, 100); // 30
keepInRange(777, 0, 100); // 100

现在，您只需要算出将 top CSS 值保持在哪个数字范围背后的数学运算。我非常，非常建议您自己尝试一下。

如果你实在想不出解决办法，这里是针对这种情况的：https://jsfiddle.net/oeynjcpL/

Answer 2

动画通过 requestAnimationFrame 变得更好 ;)

var mouse = { x:0, y:0 };
var image_position = { x:0, y:0 };

// Get mouse position
function getMouse(e){
    mouse.x = e.clientX || e.pageX;
    mouse.y = e.clientY || e.pageY;
}

$('.follower-container').mousemove(function(e){
    getMouse(e);
});

// Returns number n if is inside of minNum and maxNum range
// Otherwise returns minNum or maxNum
function keepInRange(n, minNum, maxNum) {
    return Math.min(Math.max(minNum, n), maxNum);
}

// Move visual regarding mouse position
function moveImage(){
    var distY = mouse.y - image_position.y;
    image_position.y += distY/5;
    // minHeight is the containing element's height minus half the height of the image
    var minHeight = $('.follower-container').height() - $('.follower-image').height() / 2;
    // maxHeight is half the height of the image
    var maxHeight = $('.follower-image').height() / 2;

    $('.follower-image').css({
        'top': keepInRange(image_position.y, minHeight, maxHeight) + "px"
    });

    requestAnimationFrame(moveImage);
}

requestAnimationFrame(moveImage);

跟随鼠标的图像

Image that follows mouse

javascript

mouse