Question

我使用的插件让我可以滚动和缩放图像。

我尝试点击以下img来获取left和top的值，如下所示。

<img id="zoom_mw" src="<?php echo $small_image; ?>" data-zoom-image="<?php echo $large_image; ?>" />

当我在屏幕上移动光标（由jQuery插件实现）时，我得到以下html更新：

<div class="zoomLens" style="float: right; overflow: hidden; z-index: 999; -webkit-transform: translateZ(0px); opacity: 0.4; zoom: 1; width: 16px; height: 16px; cursor: crosshair; border: 1px solid rgb(0, 0, 0); position: absolute; border-radius: 104px; left: 177px; top: 228px; display: none; background-color: white; background-position: 0px 0px; background-repeat: no-repeat;">&nbsp;</div>

我需要使用jQuery从left中获取值top和zoomLens。

我尝试了以下操作，但它正在返回undefined。

$("#zoom_mw").click(function(){
    var relX = $( "div#zoomContainer" ).html();
    var relY = $( "div#zoomLens" ).html();
    $('#coordinates').html('x: ' + relX + ' y : ' + relY);
});

有关如何从HTML获取此信息的任何想法？谢谢:)）

Answer 1

使用.css()读取样式值

$("#zoom_mw").click(function(){
    var $zoomLens = $( ".zoomLens" );
    var relX = $zoomLens.css('left');
    var relY = $zoomLens.css('top');
    $('#coordinates').html('x: ' + relX + ' y : ' + relY);
});

Answer 2

您可以使用以下代码获取偏移值：

$("#zoom_mw").click(function(){
  var pos = $( "div#zoomLens" ).offset();
  $('#coordinates').html('x: ' + pos.top + ' y : ' + pos.left);
});

在jQuery插件图片中单击检索HTML

2 个答案: