功能点:点击图片放大,滚动鼠标滚轮可再次放大缩小,鼠标点击可拖动图片位置
jQuery缩放插件Zoomify只能实现图片点击放大缩小,不满足要求
使用方法:
js已经封装好了,只要在将选择器筛选之后的对象当作参数传入方法中即可:
js调用:
加载完页面之后绑定下事件:
//$(".kc-media-div p img:not([name='messageName'])")是要实现此功能测图片对象(防止有些视频对象也用img标签)
imgZoom($(".kc-media-div p img:not([name='messageName'])"))
js工具类:
var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'],
toBind = ('onwheel' in document || document.documentMode >= 9) ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'],
slice = Array.prototype.slice, nullLowestDeltaTimeout, lowestDelta;
if ($.event.fixHooks) {
for (var i = toFix.length; i;) {
$.event.fixHooks[toFix[--i]] = $.event.mouseHooks;
}
}
var special = $.event.special.mousewheel = {
version: '3.1.9', setup: function () {
if (this.addEventListener) {
for (var i = toBind.length; i;) {
this.addEventListener(toBind[--i], handler, false);
}
} else {
this.onmousewheel = handler;
}
$.data(this, 'mousewheel-line-height', special.getLineHeight(this));
$.data(this, 'mousewheel-page-height', special.getPageHeight(this));
}, teardown: function () {
if (this.removeEventListener) {
for (var i = toBind.length; i;) {
this.removeEventListener(toBind[--i], handler, false);
}
} else {
this.onmousewheel = null;
}
}, getLineHeight: function (elem) {
return parseInt($(elem)['offsetParent' in $.fn ? 'offsetParent' : 'parent']().css('fontSize'), 10);
}, getPageHeight: function (elem) {
return $(elem).height();
}, settings: {adjustOldDeltas: true}
};
$.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, deltaX = 0, deltaY = 0,
absDelta = 0;
event = $.event.fix(orgEvent);
event.type = 'mousewheel';
if ('detail' in orgEvent) {
deltaY = orgEvent.detail * -1;
}
if ('wheelDelta' in orgEvent) {