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

最新推荐文章于 2024-06-27 16:14:54 发布

SELECT_BIN

最新推荐文章于 2024-06-27 16:14:54 发布

阅读量2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/SELECT_BIN/article/details/104948994

版权

本文介绍了一个JavaScript功能，实现点击图片后图片放大，并允许通过鼠标滚轮进一步放大缩小图片，同时支持鼠标点击拖动图片改变位置。文中提到jQuery的Zoomify插件无法满足这些需求，而提供了一种自定义的解决方案，只需调用特定的JS方法并传入选择器匹配的图片元素。

摘要由CSDN通过智能技术生成

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

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) {