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");

通过javascript将图像放置在窗口中心的位置

1 个答案: