0

我在将具有缩放镜头 id 的 div 元素居中时遇到问题。zoom-lens 是 position:absolute，我不能用这段代码将 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 ，这给了我相同的结果。这是指向我的页面的链接，其中显示图像和视频列表，选择图像并将鼠标悬停在大图像上，它将显示缩放镜头，但不会居中对齐。这是 链接

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

4

1 回答 1

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;
于 2013-05-16T02:14:47.667 回答