我需要將以下鼠標滾輪事件轉換爲可調用函數

#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

我需要將以下鼠標滾輪事件轉換爲可調用函數

回答

相關問題