如何使用elevateZoom(http://www.elevateweb.co.uk/image-zoom)将镜头定位在鼠标光标中心?问题是,当我将主图像悬停时,镜头会偏离光标。 ElevateZoom将以下两个div插入左侧的DOM:86px和顶部:178px。但我希望div的zoomContainer和zoomLens位于左侧:0 top: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;
}