鼠标移动Jquery移动块

Question

我需要脚本，这将改变translateX的位置取决于鼠标位置在这个块内。https://www.peaktwo.com/work/：这是它在一个直播网站上的样子，不能达到这个效果。有人能在jQuery上帮上忙吗？

$('.work__main').on("mousemove" ,function(e){
            let center = $(window).width()/2;
            if ((center - event.pageX) > 0 ) {
                $('.work__main').css("transform" , "translateX(-"+ event.pageX/10 +"px)")
            } else {
                $('.work__main').css("transform" , "translateX(-"+ event.pageX/10 +"px)")
            }
    });

这是我的代码--但当我试图像那样构建它时，当我把鼠标放在中间时，它会从一边跳到另一边。

Answer 1

要解决当鼠标位于屏幕中心时元素从一边跳到另一边的问题，您可以添加一个额外的检查，以确保translateX值不超过某个阈值。

下面是一个如何做到这一点的例子：

$('.work__main').on("mousemove" ,function(e){
  let center = $(window).width()/2;
  let translateX = -event.pageX / 10; // Calculate the translateX value based on the mouse position

  // Limit the translateX value so that it doesn't exceed a certain threshold
  if (translateX > 50) {
    translateX = 50;
  } else if (translateX < -50) {
    translateX = -50;
  }

  // Apply the translateX value to the element
  $('.work__main').css("transform" , "translateX(" + translateX + "px)")
});

这将确保当鼠标位于屏幕中央时，元素不会从一边跳到另一边。您可以根据自己的喜好调整阈值(在本例中为50)。