Question

我有一个图像滑块，在图像顶部覆盖了多个绝对定位文本的实例（文本的顶部位置在MS-SQL数据库中定义，并通过JSON拉入）。当屏幕加载时（如果它小于比例= 1）＆amp;当屏幕调整大小时，我想使用缩放功能将绝对定位的文本容器保持在包围图像滑块的div顶部的一定数量的像素（使用缩放功能更新）。图像宽度为100％，但随着屏幕尺寸的调整，图像高度会有所不同，因此绝对定位的文本将不会保持与图像相关的原始位置（客户端决定全屏幕覆盖文本的顶部位置）版）。以下是一些示例代码：

<div class="swiper-container">
    <div class="swiper-container">
        <img />
        <div class="overlay_holder" style="position:absolute; top:100px;>Some text</div>
        <div class="overlay_holder" style="position:absolute; top:150px;>Some text</div>
        <div class="overlay_holder" style="position:absolute; top:180px;>Some text</div>
    </div>
</div>

这是我的jQuery，我遇到的唯一问题是我需要以某种方式将每个overlay_holder div的原始CSS顶值传递给函数：

function doScaleTop（event，ui）{ var scale，origin;

  scale = Math.min(
    ui.size.width / elWidth,
    ui.size.height / elHeight
  );

  $('.overlay_holder').each(function(index, el) {
    var top = $(this).css('top');   // This is the problem line of code  - I somehow need the original CSS top value defined in the JSON
    top = top.replace('px','');
    var newTop = top*scale;
    if (newTop != 0 && newTop != '' && newTop != null && isNaN(newTop) == false) {
      newTop = newTop.toFixed(2);
    }

    $(this).css({
      top: newTop+'px'
    });
  });
}

var starterData = {
  size: {
    width: $wrapper.width(),
    height: $wrapper.height()
  }
}

doScaleTop(null, starterData);

$(window).resize(function(event) {
  var newData = {
    size: {
      width: $wrapper.width(),
      height: $wrapper.height()
    }
  }
  doScaleTop(null,newData);
});

JSON看起来像这样 - y值是每个文本叠加层的顶部位置（每个叠加层都有一个overlay_holder类）：

imgDef = [
{ type:'L', active:'Y', img:'GARDN.jpg', alt:'Tools', textoverlays: [ { x:0, y:45, r:0, mx:0, my:0, mr:0, text:'Only the Finest' }, { x:0, y:130, r:0, mx:0, my:0, mr:0, text:'TAKE A LOOK >' } ]
}
{ type:'L', active:'Y', img:'GARDN.jpg', alt:'Tools', textoverlays: [ { x:0, y:45, r:0, mx:0, my:0, mr:0, text:'Only the Finest' }, { x:0, y:130, r:0, mx:0, my:0, mr:0, text:'TAKE A LOOK >' } ]
}
];

有人可以帮忙吗？我想我可能需要使用地图功能，但我并不是百分百肯定是诚实的。

提前感谢任何提示。

在jQuery调整大小和每个函数

0 个答案: