div不居中pageX和pageY

问题描述：

我有一个问题居中一个具有变焦镜头ID的div元素。变焦镜头位置是：绝对的，我不能与此代码居中DIVdiv不居中pageX和pageY

代码：

(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

所以我想要的是变焦镜头精确地垂直和水平鼠标光标的中心。

为什么我们必须去一些外部页面（BTW有一天会关闭，所以对任何人都没有用），并潜入代码？请在这里发布所有相关信息。并解释你的意思是“中心”，因为它不是很清楚你的问题。 –

答

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

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

感谢你的努力，除了它是（$（'＃zoom-lens'）。width（）/ 2） - $（'＃zoom-box'）。offset（）。left;一个减号而不是加号 – ONYX

是的，谢谢你的更正，引用了我的答案 –

div不居中pageX和pageY

相关推荐