我正在为我们公司创建的某些软件创建文档页面。现在,我希望能够在span标签中使用属性(data-fig-attach)给出一段文本。然后jQuery读取这些标签并知道哪张图片应该放在哪里。我写了下面的一段代码,它和它的作品就像一个魅力:检查图片是否重叠并将它们放在一起
的Javascript(jQuery的):
var fig_id = null;
$(function(){
$("[data-fig-attach]").each(function(){
var top_p = $(this).position().top;
var fig_id = $(this).data().figAttach;
$('[data-fig]').each(function(){
var image = $(this);
if($(this).data().fig == fig_id){
image.css({
top: top_p,
position: 'absolute'
});
}
});
});
});
HTML:
<!-- Text part -->
<span>Lorem ipsum <span style="font-weight:bold;" data-fig-attach="1">reiciendis</span> consequatur unde quidem illum odio natus! Labore, impedit, repellendus, dolorum animi deserunt quasi dolore magnam fugit quam ad nesciunt in.</span>
<!-- Picture part -->
<div data-fig="1"><img class="art-lightbox" src="http://www.scope4mation.com/docs/files/2013/11/ESB-Overview-1.png" alt="" width="300" height="203"><br/><em>Figure 4: This is something quite different</em></div>
的问题但是,是的图片可以重叠,因为我使用position: 'absolute'
。有没有办法将第二张图片放在距离第一张图片一定量的像素上?为了澄清,我创建了一个(相当大的)图片正是我想要的:)
有人可以帮助我解决这个问题说明了什么?非常感激!
这样做完成的技巧,谢谢! :D –
很高兴能帮到你! –