JS实现点击图片放大鼠标可拖动

功能点：点击图片放大，滚动鼠标滚轮可再次放大缩小，鼠标点击可拖动图片位置

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) {
            deltaY = orgEvent.wheelDelta;
        }
        if ('wheelDeltaY' in orgEvent) {
            deltaY = orgEvent.wheelDeltaY;
        }
        if ('wheelDeltaX' in orgEvent) {
            deltaX = orgEvent.wheelDeltaX * -1;
        }
        if ('axis' in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS) {
            deltaX = deltaY * -1;
            deltaY = 0;
        }
        delta = deltaY === 0 ? deltaX : deltaY;
        if ('deltaY' in orgEvent) {
            deltaY = orgEvent.deltaY * -1;
            delta = deltaY;
        }
        if ('deltaX' in orgEvent) {
            deltaX = orgEvent.deltaX;
            if (deltaY === 0) {
                delta = deltaX * -1;
            }
        }
        if (deltaY === 0 && deltaX === 0) {
            return;
        }
        if (orgEvent.deltaMode === 1) {
            var lineHeight = $.data(this, 'mousewheel-line-height');
            delta *= lineHeight;
            deltaY *= lineHeight;
            deltaX *= lineHeight;
        } else if (orgEvent.deltaMode === 2) {
            var pageHeight = $.data(this, 'mousewheel-page-height');
            delta *= pageHeight;
            deltaY *= pageHeight;
            deltaX *= pageHeight;
        }
        absDelta = Math.max(Math.abs(deltaY), Math.abs(deltaX));
        if (!lowestDelta || absDelta < lowestDelta) {
            lowestDelta = absDelta;
            if (shouldAdjustOldDeltas(orgEvent, absDelta)) {
                lowestDelta /= 40;
            }
        }
        if (shouldAdjustOldDeltas(orgEvent, absDelta)) {
            delta /= 40;
            deltaX /= 40;
            deltaY /= 40;
        }
        delta = Math[delta >= 1 ? 'floor' : 'ceil'](delta / lowestDelta);
        deltaX = Math[deltaX >= 1 ? 'floor' : 'ceil'](deltaX / lowestDelta);
        deltaY = Math[deltaY >= 1 ? 'floor' : 'ceil'](deltaY / lowestDelta);
        event.deltaX = deltaX;
        event.deltaY = deltaY;
        event.deltaFactor = lowestDelta;
        event.deltaMode = 0;
        args.unshift(event, delta, deltaX, deltaY);
        if (nullLowestDeltaTimeout) {
            clearTimeout(nullLowestDeltaTimeout);
        }
        nullLowestDeltaTimeout = setTimeout(nullLowestDelta, 200);
        return ($.event.dispatch || $.event.handle).apply(this, args);
    }

    function nullLowestDelta() {
        lowestDelta = null;
    }

    function shouldAdjustOldDeltas(orgEvent, absDelta) {
        return special.settings.adjustOldDeltas && orgEvent.type === 'mousewheel' && absDelta % 120 === 0;
    }

    var imgZoom = function (obj) {
        var mask = "<div style = 'position: fixed;width: 100%;z-index: 5555;height: 100%;top: 0;left: 0;background: rgba(0,0,0,0.5);display:none;' id='imgZoomMask'></div>";
        $("html").append(mask);
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        $(window).resize(function () {
            windowWidth = $(window).width();
            windowHeight = $(window).height();
        });
        obj.each(function () {
            $(this).click(function () {
                $("#imgZoomMask").show();
                var src = $(this).data("src") == undefined ? $(this).attr("src") : $(this).data("src");
                var img = new Image();
                img.src = src;
                img.onload = function () {
                    var dom = "";
                    var displayWidth = 0;
                    var displayHeight = 0;
                    var style = "";
                    if (img.width > img.height) {
                        displayWidth = windowWidth / 2;
                        displayHeight = img.height * displayWidth / img.width;
                        style = "z-index:6666;position:fixed;top:" +
                            windowHeight / 2 +
                            "px;margin-top:-" +
                            displayHeight / 2 +
                            "px;left:" +
                            windowWidth / 2 +
                            "px;margin-left:-" +
                            displayWidth / 2 +
                            "px;cursor:pointer;";
                        dom = "<img draggable='true' src = '" +
                            src +
                            "' width = '50%' style='" +
                            style +
                            "' id='imgZoomImg'>";
                    } else {
                        displayHeight = windowHeight / 2;
                        displayWidth = displayHeight * img.width / img.height;
                        style = "z-index:6666;position:fixed;top:" +
                            windowHeight / 2 +
                            "px;margin-top:-" +
                            displayHeight / 2 +
                            "px;left:" +
                            windowWidth / 2 +
                            "px;margin-left:-" +
                            displayWidth / 2 +
                            "px;cursor:pointer;";
                        dom = "<img draggable='true' src = '" +
                            src +
                            "' height = '50%' style=' " +
                            style +
                            "' id='imgZoomImg'>";
                    }
                    $("body").append(dom);
                    dragging({move: "both", randomPosition: false},$("#imgZoomImg"));
                }
            });
        });
        $(document).on("click", "#imgZoomMask", function () {
            $("#imgZoomMask").hide();
            $("#imgZoomImg").fadeOut().remove();
            $("body").css('overflow','');
        });
        $(document).on("mousewheel", function (e, d) {
            if (d === 1) {
                var width = $("#imgZoomImg").width();
                var height = $("#imgZoomImg").height();
                $("#imgZoomImg").css({"width": width * 1.2, "height": height * 1.2});
            }
            if (d === -1) {
                var width = $("#imgZoomImg").width();
                var height = $("#imgZoomImg").height();
                $("#imgZoomImg").css({"width": width / 1.2, "height": height / 1.2});
            }
        });
    }
    var dragging = function (data,obj) {
        var $this = obj;
        var xPage;
        var yPage;
        var X;
        var Y;
        var xRand = 0;
        var yRand = 0;
        var father = $this.parent();
        var defaults = {move: 'both', randomPosition: true, hander: 1}
        var opt = $.extend({}, defaults, data);
        var movePosition = opt.move;
        var random = opt.randomPosition;
        var hander = opt.hander;
        if (hander === 1) {
            hander = $this;
        } else {
            hander = $this.find(opt.hander);
        }
        father.css({"position": "relative", "overflow": "hidden"});
        $this.css({"position": "fixed"});
        hander.css({"cursor": "move"});
        var faWidth = father.width();
        var faHeight = father.height();
        var thisWidth = $this.width() + parseInt($this.css('padding-left')) + parseInt($this.css('padding-right'));
        var thisHeight = $this.height() + parseInt($this.css('padding-top')) + parseInt($this.css('padding-bottom'));
        var mDown = false;
        var positionX;
        var positionY;
        var moveX;
        var moveY;
        if (random) {
            $thisRandom();
        }

        function $thisRandom() {
            $this.each(function (index) {
                var randY = parseInt(Math.random() * (faHeight - thisHeight));
                var randX = parseInt(Math.random() * (faWidth - thisWidth));
                if (movePosition.toLowerCase() == 'x') {
                    obj.css({left: randX});
                } else if (movePosition.toLowerCase() == 'y') {
                    obj.css({top: randY});
                } else if (movePosition.toLowerCase() == 'both') {
                    obj.css({top: randY, left: randX});
                }
            });
        }

        hander.mousedown(function (e) {
            father.children().css({"zIndex": "0"});
            $this.css({"zIndex": "6666"});
            mDown = true;
            X = e.pageX;
            Y = e.pageY;
            positionX = $this.position().left;
            positionY = $this.position().top;
            return false;
        });
        $(document).mouseup(function (e) {
            mDown = false;
        });
        $(document).mousemove(function (e) {
            xPage = e.pageX;
            moveX = positionX + xPage - X;
            yPage = e.pageY;
            moveY = positionY + yPage - Y;

            function thisXMove() {
                if (mDown == true) {
                    $this.css({"left": moveX});
                } else {
                    return;
                }
                if (moveX < 0) {
                    $this.css({"left": "0"});
                }
                if (moveX > (faWidth - thisWidth)) {
                    $this.css({"left": faWidth - thisWidth});
                }
                return moveX;
            }

            function thisYMove() {
                if (mDown == true) {
                    $this.css({"top": moveY});
                } else {
                    return;
                }
                if (moveY < 0) {
                    $this.css({"top": "0"});
                }
                if (moveY > (faHeight - thisHeight)) {
                    $this.css({"top": faHeight - thisHeight});
                }
                return moveY;
            }

            function thisAllMove() {
                if (mDown == true) {
                    $this.css({"left": moveX, "top": moveY});
                } else {
                    return;
                }
                if (moveX < 0) {
                    $this.css({"left": "0"});
                }
                if (moveY < 0) {
                    $this.css({"top": "0"});
                }
            }

            if (movePosition.toLowerCase() == "x") {
                thisXMove();
            } else if (movePosition.toLowerCase() == "y") {
                thisYMove();
            } else if (movePosition.toLowerCase() == 'both') {
                thisAllMove();
            }
        });
    }