如何修改jQuery图片放大插件picZoomer以适配RTL（从右到左）用户需求

核心修改点 #

• 新增isRTL配置项，可灵活切换LTR/RTL模式
• 重构水平坐标计算逻辑，适配从右到左的坐标系
• 自动适配放大窗口的默认位置，RTL下默认展示在原图左侧
• 兼容原有配置，不影响LTR模式下的原有功能

修改后完整代码 #

(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+'px', '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};

        // 初始化zoom容器大小，RTL下自动调整默认位置
        $zoomWP.css({'width':opts.zoomWidth+'px', 'height':opts.zoomHeight+'px'});
        if (!opts.zoomerPosition) {
            opts.zoomerPosition = opts.isRTL ? {top: 0, right: opts.picWidth+30+'px', left: 'auto'} : {top: 0, left: opts.picWidth+30+'px'};
        }
        $zoomWP.css(opts.zoomerPosition);
        // 初始化zoom图片大小
        $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;
            // RTL下坐标转换
            if (opts.isRTL) {
                x = opts.picWidth - x;
                $cursor.css({'right':x-cursorSizeHalf.w+'px', 'top':y-cursorSizeHalf.h+'px'});
                $zoomPic.css({'right':-(x*opts.scale-zoomWPSizeHalf.w)+'px', 'top':-(y*opts.scale-zoomWPSizeHalf.h)+'px', 'left': 'auto'});
            } else {
                $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', 'right': 'auto'});
            }

        });
        return $this;

    };
    $.fn.picZoomer.defaults = {
        picWidth: 320,
        picHeight: 320,
        scale: 2.5,
        isRTL: false, // 新增RTL开关
        zoomerPosition: null // 保留自定义位置配置
        /*,
        zoomWidth: 320,
        zoomHeight: 320*/
    };
})(jQuery)

使用方法 #

RTL场景下初始化插件时开启isRTL参数即可：

$('.your-pic-container').picZoomer({
    isRTL: true,
    // 其他自定义配置，比如缩放比例、尺寸等
});

如果需要自定义放大窗口的位置，直接传入zoomerPosition配置即可，会覆盖默认的位置规则。

内容的提问来源于stack exchange，提问作者qureshikareem