我使用了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"> </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);