Question

我的标记中有以下图像：

<img id="header_img" src="header_img.png">

很简单。现在我有两个函数可以通过悬停来改变图像的src，另一个根据窗口中的鼠标位置改变图像源：

var trigger = true;
 if(trigger) {
    jQuery('body').mousemove(function(evt) {
    var window_width = jQuery(window).width();
        var mouse_x = evt.pageX;
        var mouse_y = evt.pageY;
          if (mouse_x <= window_width/3) {
            jQuery('#header_img').attr('src', 'left.png');
          }
          if (mouse_x >= window_width/3) {
            jQuery('#header_img').attr('src', 'right.png');
          }
   }); 
 }

和

jQuery('#header_img').hover(function() { 
    trigger = false;
    jQuery(this).attr('src','rotate.gif')}, function() { 
    trigger = true;
    jQuery(this).attr('src','header_img.png')
});

因为如果图像悬停我不想再激活.mousemove()函数，我可以通过将布尔值trigger设置为false来避免它。不幸的是，它不起作用。它甚至记录了我false，但第一个函数一直在触发。为什么呢？

提前致谢！

Answer 1

该函数已绑定，因此您需要解除绑定：

function bodyMouseMoveFunction(evt) {
    //your function here
}
jQuery('body').on('mousemove', bodyMouseMoveFunction);

jQuery('#header_img').hover(function() { 
  jQuery('body').off('mousemove');
  jQuery(this).attr('src','rotate.gif')}, function() { 
  jQuery('body').on('mousemove', bodyMouseMoveFunction);
  jQuery(this).attr('src','header_img.png')
});

或移动您的触发器检查：

jQuery('body').mousemove(function(evt) {
  if (trigger) {
    var window_width = jQuery(window).width();
    var mouse_x = evt.pageX;
    var mouse_y = evt.pageY;
      if (mouse_x <= window_width/3) {
        jQuery('#header_img').attr('src', 'left.png');
      }
      if (mouse_x >= window_width/3) {
        jQuery('#header_img').attr('src', 'right.png');
      }
   }
});

boolean var不会停止触发函数

1 个答案: