jquery 启用/禁用mousemove功能

tktrz96b  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(143)

我有两个按钮。当我点击第一个按钮时,我的“d”和“bg”元素在mousemove上移动。

<section>
    <div class="d"></div>
    <div class="bg"></div>
</section>
<div class="button1"></div>
<div class="button2"></div>

$('.button1').click(function(){
    $('section').delay(2500).mousemove(function(e) {
        parallaxIt(e, ".d", -12.5);
        parallaxIt(e, ".bg", -3.75);
    });
});

function parallaxIt(e, target, movement) {
    var $this = $('section');
    var relX = e.pageX - $this.offset().left;
    var relY = e.pageY - $this.offset().top;

    TweenMax.to(target, 1, {
        x: (relX - $this.width() / 2) / $this.width() * movement,
        y: (relY - $this.height() / 2) / $this.height() * movement
    });
}

我希望当我点击第二个按钮时,元素不再移动。
我首先尝试了unbind方法:

$('.button2').click(function(){
    $('section').unbind('mousemove');
});

这样,我的问题是,当mousemove停止时,我的元素不会在它们原来的位置结束,而是突然停留在停止它们时的位置。如果有办法的话,我更喜欢这种方法。
第二种方法是关闭方法:

$('.button2').click(function(){
    $('section').mousemove(function() {
        $('.d, .bg').off("mousemove", mouse);
    });
});

这里我的问题是,它不停止鼠标点击后移动在所有。
也许重要的是要知道我使用jQuery v1.11.0。请给予我一个简单的答案,因为我做网页设计的爱好,主要是为我自己的个人网站或为朋友,所以我不是专业的。

0yycz8jy

0yycz8jy1#

要停止鼠标移动效果并将元素带回到单击第二个按钮时的起始位置,可以通过关闭鼠标移动并使用函数将元素放回其所属位置来完成。

// Initialize a variable to track whether the mousemove effect is active
var isMousemoveActive = false;

// Function to reset the elements' positions to their original state
function resetPositions() {
  // Use TweenMax to smoothly reset positions
  TweenMax.to(".d, .bg", 1, { x: 0, y: 0 });
}

// Button 1 click handler
$('.button1').click(function () {
  // Start the mousemove effect
  isMousemoveActive = true;

  // Attach the mousemove event to the section
  $('section').mousemove(function (e) {
    if (isMousemoveActive) {
      // Apply parallax effect
      parallaxIt(e, ".d", -12.5);
      parallaxIt(e, ".bg", -3.75);
    }
  });
});

// Button 2 click handler
$('.button2').click(function () {
  // Stop the mousemove effect
  isMousemoveActive = false;

  // Detach the mousemove event from the section
  $('section').off('mousemove');

  // Reset the positions of .d and .bg elements
  resetPositions();
});

// Function to apply parallax effect
function parallaxIt(e, target, movement) {
  var $this = $('section');
  var relX = e.pageX - $this.offset().left;
  var relY = e.pageY - $this.offset().top;

  // Use TweenMax to smoothly apply the parallax effect
  TweenMax.to(target, 1, {
    x: (relX - $this.width() / 2) / $this.width() * movement,
    y: (relY - $this.height() / 2) / $this.height() * movement,
  });
}

相关问题