1

こんにちは私は私のdivにいくつかの大きな画像と1つの小さな拡大画像を持っています。これらはすべての画像の右上隅に動的に配置したいです。私の大きな画像はそれらをクリックすることで切り替わります。それらのサイズは異なります。現在、すべての画像の高さと幅を取得し、小さな画像を手動で配置しようとしています-これをより良くする方法はありますか？

小さい拡大鏡の画像は、大きい画像よりもz-indexが高くなります。

私のJQUERYコード：

        $('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);​​​​

これはあなた自身の投稿されたマークアップに基づいており、JSFiddleのデモはここにあります。

于 2012-04-29T13:18:01.540 に答える
0

divラッパー内に画像を配置しない場合、私はあなたが行ったのと同じ方法で行ったでしょう。ラッパーを配置できる場合は、すべてのラッパーに拡大鏡画像を配置し、ラッパー自体に「big」クラスがある場合に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 に答える