圖像在窗口中心的位置由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");