1

如何让 elevateZoom ( http://www.elevateweb.co.uk/image-zoom ) 将镜头定位在鼠标光标中心？问题是当我将主图像悬停时，镜头似乎偏离了我的光标。ElevateZoom 将以下两个 div 插入到位于左侧的 DOM 中：86px 和顶部：178px。但我希望 div zoomContainer 和 zoomLens 位于左侧：0 顶部：0。

<div class="zoomContainer" style="position: absolute; left: 86px; top: 178px; height: 574px; width: 453px;">
    <div class="zoomLens" style="background-position: 0px 0px; float: right; overflow: hidden; z-index: 999; opacity: 0.4; width: 201.333px; height: 200.875px; background-color: white; cursor: default; border: 1px solid black; background-repeat: no-repeat; position: absolute; left: 0px; top: 0px; display: none;"> 
</div>

下面是我的代码

HTML

<div id="images">
    <div class="image current">
        <span>
            <img id="zoom_01" src="img/product1_small.jpg" data-zoom-image="img/product1.jpg">
            <div class="zoomContainer" style="position: absolute; left: 86px; top: 178px; height: 574px; width: 453px;">
                <div class="zoomLens" style="background-position: 0px 0px; float: right; overflow: hidden; z-index: 999; opacity: 0.4; width: 201.333px; height: 200.875px; background-color: white; cursor: default; border: 1px solid black; background-repeat: no-repeat; position: absolute; left: 0px; top: 0px; display: none;">
                </div>
            </div>
        </span>
    </div>
    <div id="zoomBox"></div>
</div>

JS

$("#zoom_01").elevateZoom({
    zoomWindowWidth: 400,
    zoomWindowHeight: 400,
    zoomType: 'window',
    zoomWindowPosition: 'zoomBox'
});

CSS

#zoomBox{
    position: absolute;
    width: 400px; height: 400px;
    right: -100%;
    border: 5px solid #000;
}
.image{
    display: table;
    position: absolute;
    left: 100%;
}
.image.current{
    left: 0;
}
.image span{
    display: table-cell;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}
4

0 回答 0