Question

你好我的div中有几个大图像，还有一个小放大镜图像，我希望动态定位在每个图像的右上角。我的大图像通过点击它们来切换。它们的尺寸不同。现在我正试图获取每个图像的高度和宽度并手动定位小图像 - 有没有办法更好地做到这一点？

小放大镜图像的z指数高于较大的z-index。

MY JQUERY CODE：

        $('img.small').fadeOut('fast', function() {

        $('img.small').css('top',$(el).find('img.big:last').height()+60); // i want to change this
        $('img.small').css('top',$(el).find('img.big:last').width()+60); // and this

        $('img.small').fadeIn(); 
        });

我的CSS：

 #myGallery {
   width: 100%;
   height: 300px;
  }



.small img{
position: absolute;
left:150px;
top:150px;
z-index: 15000;
width: 35px;
height: 35px;   
}

我的HTML：

<div id="myGallery" class="spacegallery">   

<img class="small" src="small.jpg" alt=""  />   
<img class="big" src=images/bw1.jpg alt=""  />
<img class="big" src=images/bw2.jpg alt=""  />
<img class="big" src=images/bw3.jpg alt=""  />

            </div>

谢谢！

Answer 1

为此，只要您的用户在浏览器中相对最新，您就可以使用CSS，虽然这需要进行一些标记更改：

<div id="myGallery" class="spacegallery">
    <span class="imgWrap">
        <img class="big" src='http://davidrhysthomas.co.uk/img/dexter.png' alt=""/>
    </span>
    <span class="imgWrap">
        <img class="big" src='http://davidrhysthomas.co.uk/img/mandark.png' alt=""/>
    </span>
</div>

和CSS：

#myGallery {
    width: 100%;
    height: 300px;
}

.imgWrap {
    float: left;
    position: relative;
}

.imgWrap::after {
    content: url(http://davidrhysthomas.co.uk/img/glass.png);
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,.3);
    border-radius: 0.5em;
}

JS Fiddle demo

但是，如果您更喜欢使用jQuery，那么我建议如下：

var glass = $('<img />', {
    src: 'http://davidrhysthomas.co.uk/img/glass.png', // host your own image though. Please.
    class: 'glass'
}).clone();

$('.big')
    .wrap('<span></span>')
    .addClass('wrap')
    .parent()
    .addClass('wrap')
    .append(glass);

这取决于您自己发布的标记和JS Fiddle demo is here。

Answer 2

如果你不把图片放在div包装器里面，我会像你一样做。如果你可以放置一个包装器，我可能已经将放大镜图像放在每个包装器中，并在包装器本身具有“大”类时通过css使其可见。例如：

div.big {
position: relative;
}
div.big img.magnifier {
display: block;
position: absolute;
top: 0px;
right: 0px;
}
div.small img.magnifier{
display: none;
}

并在你的HTML中

<div class="small">
<img src="..." />
<img src="..." class="magnifier" />
</div>
<div class="small">
<img src="..." />
<img src="..." class="magnifier" />
</div>
<div class="big">
<img src="..." />
<img src="..." class="magnifier" />
</div>

最后，在你的js：

$('img.magnifier').bind('click', function() {
$(this).siblings('img').attr('src', '..your small picture...');
})

如何在较大的角落里放置较小的图像？

2 个答案: