Jquery:缩放后的图像未正确显示

Jquery: Zoomed image not show correctly

本文关键字：显示 图像 缩放 Jquery      更新时间：2024-04-01

我有以下插件代码。这是一个图片缩放器，并将图像宽度设置为100%；高度为320px。他们已经将这些值作为参数传递。宽度的默认值为320像素。然后我将此宽度转换为100%。问题是，在将宽度转换为百分比之后（因为我是在响应环境中构建的），1。缩放后的图像没有以其全宽显示。当我把光标悬停在图像上时，我必须移动到图像的最左边才能看到预览。如能在这方面提供任何帮助，我们将不胜感激。这是代码片段。

;(function($){
    $.fn.picZoomer = function(options){
        var opts = $.extend({}, $.fn.picZoomer.defaults, options), 
            $this = this,
            $picBD = $('<div class="picZoomer-pic-wp"></div>').css({'width':opts.picWidth+'%', 'height':opts.picHeight+'px'}).appendTo($this),
            $pic = $this.children('img').addClass('picZoomer-pic').appendTo($picBD),
            $cursor = $('<div class="picZoomer-cursor"><i class="f-is picZoomCursor-ico"></i></div>').appendTo($picBD),
            cursorSizeHalf = {w:$cursor.width()/2 ,h:$cursor.height()/2},
            $zoomWP = $('<div class="picZoomer-zoom-wp"><img src="" alt="" class="picZoomer-zoom-pic"></div>').appendTo($this),
            $zoomPic = $zoomWP.find('.picZoomer-zoom-pic'),
            picBDOffset = {x:$picBD.offset().left,y:$picBD.offset().top};

        opts.zoomWidth = opts.zoomWidth||opts.picWidth;
        opts.zoomHeight = opts.zoomHeight||opts.picHeight;
        var zoomWPSizeHalf = {w:opts.zoomWidth/2 ,h:opts.zoomHeight/2};

        $zoomWP.css({'width':opts.zoomWidth+'px', 'height':opts.zoomHeight+'px'});
        $zoomWP.css(opts.zoomerPosition || {top: 0, left: opts.picWidth+30+'px'});
        $zoomPic.css({'width':opts.picWidth*opts.scale+'px', 'height':opts.picHeight*opts.scale+'px'});

        $picBD.on('mouseenter',function(event){
            $cursor.show();
            $zoomWP.show();
            $zoomPic.attr('src',$pic.attr('src'))
        }).on('mouseleave',function(event){
            $cursor.hide();
            $zoomWP.hide();
        }).on('mousemove', function(event){
            var x = event.pageX-picBDOffset.x,
                y = event.pageY-picBDOffset.y;
            $cursor.css({'left':x-cursorSizeHalf.w+'px', 'top':y-cursorSizeHalf.h+'px'});
            $zoomPic.css({'left':-(x*opts.scale-zoomWPSizeHalf.w)+'px', 'top':-(y*opts.scale-zoomWPSizeHalf.h)+'px'});
        });
        return $this;
    };
    $.fn.picZoomer.defaults = {
        picWidth: 100,
        picHeight: 320,
        scale: 2.5,
        zoomerPosition: {top: '0', left: '350px'}
        /*,
        zoomWidth: 320,
        zoomHeight: 320*/
    };
})(jQuery);

[enter image description here][1]

我试着玩这个插件，我希望这是你想要的结果。

我得到了原始插件，只更改了"缩放"answers"缩放位置"的默认值，但这对更改并不重要。

$.fn.picZoomer.defaults = {
    picWidth: 320,
    picHeight: 320,
    scale: 5, //<--- THIS
    zoomerPosition: {top: '350px', left: '0px'} //<--- THIS
    /*,
    zoomWidth: 320,
    zoomHeight: 320*/
};

基本概念是将正确的像素宽度传递给插件。使用responsible，我选择了通过Jquery调整大小，因为插件强制使用像素尺寸，缩放坐标的百分比会出现问题。

$(document).ready(function(){
    $('.picZoomer').picZoomer({
        picWidth: $(this).width()
    });
});

var clrTimeout;
$(window).resize(function(){
  clearTimeout(clrTimeout);
    clrTimeout = setTimeout(function(){
        $('.picZoomer').html($('.imgToSave'));
        $('.picZoomer').picZoomer({
            picWidth: $(this).width()
        });
  }, 200);
});

超时对于避免重载调整大小调用非常有用。剩下的最后一个问题是纵横比。

这是JSFiddle示例

希望这对你有所帮助。

相关文章：