Question

我正在尝试创建一个缩放的可视框，并可能通过鼠标以下将Yavis上的可视框从顶部移动到底部。

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

这是我的代码：

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()将返回两个传递的数字的较大：

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

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

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保留在其中的数字范围后面的数学即可。我高度推荐，高度建议您自己尝试一下。

如果您真的不能自己解决问题，这里就是这种情况：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);

跟随鼠标的图像

2 个答案: