1

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

小放大镜图像比大放大镜图像具有更高的 z-index。

我的查询代码：

        $('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>

谢谢！

4

2 回答 2

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 小提琴演示。

但是，如果您更喜欢使用 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 演示在这里。

于 2012-04-29T13:18:01.540 回答
0

如果您不将图片放在 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...');
})
于 2012-04-29T13:17:07.020 回答