如何为 RTL 用户转换 jquery pic zoomer

编程问答 2022-11-21

问题描述

我想为 RTL 用户获取以下代码的 jquery 插件。有人可以帮我在 RTL 中转换这个 jquery 代码吗？ https://www.jqueryscript.net/demo/jQuery-Plugin-For-Image-Zoom-On-Hover-picZoomer

这是jquery代码。我只需要帮助来为 RTL 用户进行计算。 CSS 已准备好 RTL 但尝试更改 jquery 但没有结果。

(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容器大小
        $zoomWP.css({'width':opts.zoomWidth+'px','height':opts.zoomHeight+'px'});
        $zoomWP.css(opts.zoomerPosition || {top: 0,left: opts.picWidth+30+'px'});
        //初始化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;

            $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: 320,picHeight: 320,scale: 2.5,zoomerPosition: {top: '0',left: '350px'}
        /*,zoomWidth: 320,zoomHeight: 320*/
    };
})(jQuery);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljqueryrtlcss