无法在jQuery插件中

时间:2015-05-06 09:57:48

标签: javascript jquery html jquery-plugins execution

我使用了MIT / GPL许可的jQueryPlugin(用于缩放)并对其进行了修改以满足我的需求。 不幸的是,代码执行没有按预期停止。从理论上讲,当鼠标离开标记为缩放的图像时,它会立即停止。

在" cursorPOS"函数,检查鼠标是否在容器外:

if (posY < offset.top || posX < offset.left || posY > (offset.top + imageHeight) || posX > (offset.left + imageWidth)) {
    $(imagezoomCursor.selector).remove();
    $('#RadialBox > img[id!="TraversalZoomImage5x"]').remove();
    $('#RadialBox').removeClass('radialzoom-view').append('<img data-radialzoom="' + radialZoomSource + '" src="' + radialSource + '" class="radialzoom">');
    return;
}

它执行得非常好,但它不会停止执行,即使我发送了返回命令。有没有人有想法,如何解决这个问题?

(function ($) {
    var defaults = {
        cursorColor: '237,241,244',
        cursorOpacity: 1,
        cursor: 'pointer',
        zoomviewsize: [0, 0],
        magnification: 3,

    };

    var imagezoomCursor, imagezoomView, settings, imageWidth, imageHeight, offset;
    var radialmethods = {
        init: function (options) {
            $this = $(this),
                imagezoomCursor = $('.radialzoom-cursor'),
                imagezoomView = $('.radialzoom-view'),

                $(document).on('mouseenter', $this.selector, function (e) {
                    var data = $(this).data();
                    settings = $.extend({}, defaults, options, data);
                    offset = $(this).offset();
                    imageWidth = $(this).width();
                    imageHeight = $(this).height();
                    settings.zoomviewsize = [$(this).parent().width(), $(this).parent().height()];

                    cursorSize = [(settings.zoomviewsize[0] / settings.magnification), (settings.zoomviewsize[1] / settings.magnification)];

                    $original = $(this);

                    radialZoomSource = $(this).attr('data-radialzoom');
                    radialSource = $(this).attr('src');

                    var posX = e.pageX,
                        posY = e.pageY,
                        zoomViewPositionX;
                    $('body').prepend('<div class="radialzoom-cursor">&nbsp;</div>');
                    $('#RadialBox').addClass('radialzoom-view').prepend('<img id="RadialZoomImage" src="' + radialZoomSource + '">');

                    $(imagezoomView.selector).css({
                        'position': 'relative',
                        'z-index': 7,
                        'overflow': 'hidden',
                    });

                    $(imagezoomView.selector).children('img').css({
                        'position': 'relative',
                        'width': imageWidth * settings.magnification,
                        'height': imageHeight * settings.magnification,

                    });

                    $(imagezoomCursor.selector).css({
                        'position': 'absolute',
                        'width': cursorSize[0],
                        'height': cursorSize[1],
                        'background-color': 'rgb(' + settings.cursorColor + ')',
                        'z-index': 7,
                        'opacity': settings.cursorOpacity,
                        'cursor': settings.cursor,
                        'border': settings.cursorBorder,
                    });

                    $(imagezoomCursor.selector).css({
                        'top': posY - (cursorSize[1] / 2),
                        'left': posX
                    });

                    $(document).on('mousemove', document.body, radialmethods.cursorPos);

                });
        },

        cursorPos: function (e) {
            var posX = e.pageX,
                posY = e.pageY;
            if (posY < offset.top || posX < offset.left || posY > (offset.top + imageHeight) || posX > (offset.left + imageWidth)) {
                $(imagezoomCursor.selector).remove();


                $('#RadialBox > img[id!="TraversalZoomImage5x"]').remove();

                $('#RadialBox').removeClass('radialzoom-view').append('<img data-radialzoom="' + radialZoomSource + '" src="' + radialSource + '" class="radialzoom">');

                return;
            }



            if (posX - (cursorSize[0] / 2) < offset.left) {
                posX = offset.left + (cursorSize[0] / 2);
            } else if (posX + (cursorSize[0] / 2) > offset.left + imageWidth) {
                posX = (offset.left + imageWidth) - (cursorSize[0] / 2);
            }

            if (posY - (cursorSize[1] / 2) < offset.top) {
                posY = offset.top + (cursorSize[1] / 2);
            } else if (posY + (cursorSize[1] / 2) > offset.top + imageHeight) {
                posY = (offset.top + imageHeight) - (cursorSize[1] / 2);
            }

            $(imagezoomCursor.selector).css({
                'top': posY - (cursorSize[1] / 2),
                'left': posX - (cursorSize[0] / 2)
            });
            $(imagezoomView.selector).children('img').css({
                'top': ((offset.top - posY) + (cursorSize[1] / 2)) * settings.magnification,
                'left': ((offset.left - posX) + (cursorSize[0] / 2)) * settings.magnification
            });
        }
    };

    $.fn.radialZoom = function (method) {
        if (radialmethods[method]) {
            return radialmethods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return radialmethods.init.apply(this, arguments);
        } else {
            $.error(method);
        }
    }

    $(document).ready(function () {
        $('[data-radialzoom]').radialZoom();
    });
})(jQuery);

0 个答案:

没有答案