我需要将以下鼠标滚轮事件转换为可调用函数

#horiz将是我想将粗体代码应用于的任何通用标记。我使用jScrollPane和jQuery MouseWheel库。我需要将以下鼠标滚轮事件转换为可调用函数

$("#horiz").mousewheel(function(event, delta) { 
    **event.preventDefault(); 
    $(this).find(".jspPane").animate({"left": "+=" + (50 * delta) + "px"}, 0); 
    $(this).find(".jspPane").css("left").replace(/[^-\d\.]/g, '') > 0 ? $(this).find(".jspPane").animate({"left": "0px"}, 0) : null; 
    $(this).find(".jspPane").css("left").replace(/[^-\d\.]/g, '') < (($(this).find("#scrollText").css("width").replace(/[^-\d\.]/g, '') - $(this).css("width").replace(/[^-\d\.]/g, '')) * -1) ? $(this).find(".jspPane").animate({"left": (($(this).find("#scrollText").css("width").replace(/[^-\d\.]/g, '') - $(this).css("width").replace(/[^-\d\.]/g, '')) * -1) + "px"}, 0) : null; 
    if($(this).find(".jspTrack").css("width").replace(/[^-\d\.]/g, '') - $(this).find(".jspDrag").css("width").replace(/[^-\d\.]/g, '') == $(this).find(".jspDrag").css("left").replace(/[^-\d\.]/g, '')) { 
     //Track End - Right 
    } else if ($(this).find(".jspDrag").css("left").replace(/[^-\d\.]/g, '') == 0) { 
     //Track End - Left 
    } else { 
     //Track Mid - Anywhere between ends 
    }** 
});

来源

2011-08-23 Matt

每当有大量的调用需要对特定的DOM对象执行操作时，通常最好将功能封装到jQuery插件中。从长远来看，您的代码将更易于维护。

$(document).ready(function() { 

    $.extend({ 

     myMouseScrollable: function() { 

     return this.each(function() { 

      var $self = $self; 
      var $jsPane = $self.find(".jsPane"); 
      var OnMouseScroll = function(event, delta) { 

      $jsPane.animate({"left": "+=" + (50 * delta) + "px"}, 0); 
      $jsPane.css("left").replace(/[^-\d\.]/g, '') > 0 ? $jsPane.animate({"left": "0px"}, 0) : null; 
      $jsPane.css("left").replace(/[^-\d\.]/g, '') < (($self.find("#scrollText").css("width").replace(/[^-\d\.]/g, '') - $self.css("width").replace(/[^-\d\.]/g, '')) * -1) ? $jsPane.animate({"left": (($self.find("#scrollText").css("width").replace(/[^-\d\.]/g, '') - $self.css("width").replace(/[^-\d\.]/g, '')) * -1) + "px"}, 0) : null; 
      if($self.find(".jspTrack").css("width").replace(/[^-\d\.]/g, '') - $self.find(".jspDrag").css("width").replace(/[^-\d\.]/g, '') == $self.find(".jspDrag").css("left").replace(/[^-\d\.]/g, '')) { 
        //Track End - Right 
      } else if ($self.find(".jspDrag").css("left").replace(/[^-\d\.]/g, '') == 0) { 
        //Track End - Left 
       } else { 
        //Track Mid - Anywhere between ends 
       }** 
      } 

      $self.mousewheel(OnMouseScroll); 


     }); 

     } 

    }); 

    });

现在，每当你需要这个活动适用于你只是一个新的对象：

$("#horiz").myMouseScrollable();

我花了一些优化调戏你有代码。缓存选择器总是一个好主意，而不是一遍又一遍地使用它们。

特别是重复调用$self.find('.jsPane');

来源

2011-08-23 19:20:37

你通过通过一个ID绑定的.mousewheel事件到一个特定的元素应用该代码（我希望你仅仅使用ID =地平线的页面上的一个元素）。您可以通过使用类而不是和ID来对页面上的任何元素执行此操作。

这将适用的功能与标识HORIZ元素，并与类myMouseWheelBinding页面上的任何元素

$("#horiz, .myMouseWheelBinding").mousewheel(function(event, delta) { 
    //Your code here 
});

或刚刚离开过id和使用类（不要忘记添加类的HORIZ元素）

$(".myMouseWheelBinding").mousewheel(function(event, delta) { 
    //Your code here 
});

的Html：

<div class="myMouseWheelBinding"...

来源

2011-08-23 19:23:55

我认为这将是最好的策略。出于某种原因，下面创建的功能打破了可滚动性：/谢谢！ – Matt

我需要将以下鼠标滚轮事件转换为可调用函数

回答

相关问题