Question

我遇到了一个以div变焦镜头为中心的div元素的问题。变焦镜头是位置：绝对，我不能用这个代码居中div

代码：

(function($) {
    $.fn.mediabox = function(options){  

        var config = $.extend(config, options);

        $(this).bind('init', function(){            
            $(config.data).each(function(index, element){
                // preload images //
                $('#zoom-lens').hide();

                if($(this)[0] != true) {                    
                    new Image().src = config.path + $(this)[1];                 
                }               
            }) 
        }).trigger('init')
        .find('#zoom-box').mousemove(function(e) {
            var index = $(this).find('div:visible').not('#zoom-lens').index();
            // enable zoom-lens

            if(config.data[index][0] == false){
                                    // here is where i'm having the problems                    
                var left = e.pageX - ($('#zoom-lens').width() / 2);
                var top = e.pageY - ($('#zoom-lens').height() / 2);
                $('#zoom-lens').css({'left':left + 'px', 'top':top + 'px'}).show();

                /*$('#zoom-lens').draggable({
                    'containment': '#zoom-box',
                    drag: function (event, ui) {

                    }
               })*/
                $('#cords').text(e.pageX);
            }
        }).end()
        .find('.small-thumb').mouseover(function(e) {
            //alert($(this).data('id'));            
            $('#zoom-box div').hide();          
            $('#zoom-box div:eq(' + $(this).data('id') + ')').show();
            var id = $(this).data('id');
            if(config.data[id][0] == false){            
                $('#zoom-box div:eq(0)').html('');
            }else{
                $('#zoom-box div:eq(0)').html(config.data[id][1]);  
            }
        });;
    }   
})(jQuery);

相关代码：

var left = e.pageX - ($('#zoom-lens').width() / 2);
var top = e.pageY - ($('#zoom-lens').height() / 2);
$('#zoom-lens').css({'left':left + 'px', 'top':top + 'px'}).show();

我尝试过使用marginLeft，这给了我相同的结果。这是指向我的页面的链接，该页面显示图像和视频列表，选择图像并将鼠标悬停在大图像上，它将显示变焦镜头但不会居中对齐。这是link

所以我想要的是变焦镜头正好垂直和水平地位于鼠标光标的中心。

Answer 1

由于您的容器处于相对位置，因此您需要在计算中添加其偏移量。

var left = e.pageX - ($('#zoom-lens').width() / 2) - $('#zoom-box').offset().left;
var top = e.pageY - ($('#zoom-lens').height() / 2) - $('#zoom-box').offset().top;

div不以pageX和pageY为中心

1 个答案: