图像在窗口中心的位置由javascript

Question

我正在尝试制作缩放预览图像。这几乎是工作，但我需要通过Y在窗口的中心显示它，并用光标向左移动。现在我的大图像在X和Y中移动。如何修复它？我知道我必须更改e.pageY但是为了什么？

this.product_img_link = function(){ 
/* CONFIG */ 

xOffset = 10; 
yOffset = 30; 



/* END CONFIG */ 
$("a.product_img_link").hover(function(e){ 
     this.t = this.title; 
     this.title = ""; 
     var c = (this.t != "") ? "<br/>" + this.t : ""; 
     $("body").append("<p id='product_img_link'><img src='"+ this.rel +"' ' alt='Image preview' /> "+ c +"</p>"); 
     $("#product_img_link") 
      .css("top",(e.pageY -100) + "px") 
      .css("left",(e.pageX + yOffset) + "px") 
      .fadeIn("fast"); 

    }, 
    function(){ 
     this.title = this.t; 
     $("#product_img_link").remove(); 
    }); 


$("a.product_img_link").mousemove(function(e){ 
    $("#product_img_link") 

     .css("left",(e.pageX + yOffset) + "px"); 
}); 
}; 

$(document).ready(function(){ 
    product_img_link(); 
}); 

这是我的模板：

<script type="text/javascript" src="/modules/productimage/js/zoomi.js"></script> 
<link media="all" type="text/css" rel="stylesheet" href="/modules/productimage/css/product_zoom.css"> 


{if isset($products)} 
    <!-- Products list --> 
    <ul id="product_list" class="clear"> 
    {foreach from=$products item=product name=products} 
     <li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix"> 
      <div class="left_block"> 
       {if isset($comparator_max_item) && $comparator_max_item} 
        <p class="compare"> 
         <input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} /> 
         <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label> 
        </p> 
       {/if} 
      </div> 
      <div class="center_block"> 
       <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" rel="{$link->getImageLink($product.link_rewrite, $product.id_image, 'large_default')}"> 
        <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="gallery thumbnail" /></a> 

Answer 1

如果你想找到该窗口的中心 “y” 的点，使用jQuery：

$(window).height()/2 

这将找到的高度的窗口，并除以二找到中心。

您可以用这个替换“e.pageY”，但是图片仍然显得有点偏离中心。

要完全居中，您还需要稍微调整图像的“y”位置，以使图像的中心点位于窗口的中心点。因此，我们可以做一些类似的段落东西保持图像发现其中心点，导致我们的代码看起来像这样：

($(window).height()/2) - ($('#product_img_link').height()/2) 

...让你充分的jQuery的CSS声明是这样的：

$("#product_img_link") 
     .css("top",(($(window).height()/2) - ($('#product_img_link').height()/2)) + "px") 
     .css("left",(e.pageX + yOffset) + "px") 
     .fadeIn("fast");