Jquery增加鼠標(biāo)中間功能mousewheel的實(shí)例代碼
(function ($) {
var types = ['DOMMouseScroll', 'mousewheel'];
$.event.special.mousewheel = {
setup: function () {
if (this.addEventListener) {
for (var i = types.length; i;) {
this.addEventListener(types[--i], handler, false);
}
} else {
this.onmousewheel = handler;
}
},
teardown: function () {
if (this.removeEventListener) {
for (var i = types.length; i;) {
this.removeEventListener(types[--i], handler, false);
}
} else {
this.onmousewheel = null;
}
}
};
$.fn.extend({
mousewheel: function (fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function (fn) {
return this.unbind("mousewheel", fn);
}
});
function handler(event) {
var orgEvent = event || window.event, args = [].slice.call(arguments, 1), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
event = $.event.fix(orgEvent);
event.type = "mousewheel";
// Old school scrollwheel delta
if (event.originalEvent.wheelDelta) { delta = event.originalEvent.wheelDelta / 120; }
if (event.originalEvent.detail) { delta = -event.originalEvent.detail / 3; }
// New school multidimensional scroll (touchpads) deltas
deltaY = delta;
// Gecko
if (orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS) {
deltaY = 0;
deltaX = -1 * delta;
}
// Webkit
if (orgEvent.wheelDeltaY !== undefined) { deltaY = orgEvent.wheelDeltaY / 120; }
if (orgEvent.wheelDeltaX !== undefined) { deltaX = -1 * orgEvent.wheelDeltaX / 120; }
// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);
return $.event.handle.apply(this, args);
}
})(jQuery);
調(diào)用:
$(document).mousewheel(function (e, detail) {
}
相關(guān)文章
jQuery實(shí)現(xiàn)仿Google首頁拖動(dòng)效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿Google首頁拖動(dòng)效果的方法,涉及jQuery操作鼠標(biāo)事件及div層的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05jQuery UI插件自定義confirm確認(rèn)框的方法
這篇文章主要介紹了jQuery UI插件自定義confirm確認(rèn)框的方法,實(shí)例分析了jQuery的UI插件使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03jQuery Select(單選) 模擬插件 V1.3.62 改進(jìn)版
改進(jìn)jQuery Select(單選) 模擬插件 V1.3.6,增加mouseover事件2010-07-07jQuery插件echarts實(shí)現(xiàn)的多柱子柱狀圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實(shí)現(xiàn)的多柱子柱狀圖效果,結(jié)合完整實(shí)例形式分析了echarts繪制多柱子柱狀圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03利用jQuery實(shí)現(xiàn)可輸入搜索文字的下拉框
jQuery實(shí)現(xiàn)點(diǎn)擊下拉框輸入框時(shí),自動(dòng)顯示下面的下拉列表,而且是根據(jù)輸入框中輸入的搜索添加,自動(dòng)在后臺(tái)查找,然后傳到前臺(tái),展現(xiàn)頁面2013-10-10jQuery Ajax 實(shí)例代碼 ($.ajax、$.post、$.get)
下面小編就為大家?guī)硪黄猨Query Ajax 實(shí)例代碼 ($.ajax、$.post、$.get)。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04