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

這將找到窗口的高度並除以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");