0

クリックで画像を拡大し、ページからはみ出さないように移動しています。それぞれの後ろに黒い写真の親divがあるので、ホバーすると写真の不透明度を変更して暗く見えるようにできます。これはすべて正常に機能しますが、写真を拡大して移動すると、黒いボックスが残ります。それを消す必要がありますが、試してみると子供の写真も消えます。

ここにコードがあります.jsfiddleが下に投稿されています

HTML

<div id="Gpic1">
    <img class='galleryPics' id='pic1' src='http://i.imgur.com/urxD24P.jpg?1'>
</div>

CSS

#Gpic1 {
float: left;
width: 187px;
height: 280px;
margin-left: 5%;
display: inline-block;
background: black;
padding: 0;
}

#pic1{
width: 187px;
height: 280px;
}

.enlarged {
    border: 10px solid #e5dbcc;
    position: absolute;
    -webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);`
}

Jクエリ

 $('#Gpic1').hover(function () {
 if (!$(this).find('img').hasClass('enlarged')) {
     $(this).find('img').fadeTo(500, 0.5);
 }


}, function () {
     $(this).find('img').fadeTo(500, 1);
 });

 $('#pic1').click(function () {
     $(this).fadeTo(0, 1);
 if ($(this).hasClass('enlarged')) {
     $(this).removeClass('enlarged');

     $(this).stop().animate({
         width: 187,
         height: 280
     }, 0,

     function () {
         $(this).parent().removeClass('ontop');
     });
 } else {
     $(this).addClass('enlarged')
     $(this).parent().addClass('ontop');
     $(this).stop().animate({
         width: 533,
         height: 800,
         left: +590,
         bottom: +50
     }, 200);

 }

 });
4

3 に答える 3

0

を削除しようとすると#Gpic1、絶対配置されている場合でも、すべての子が削除されます。

黒の背景だけを消したい場合は、含まれている div から黒の背景を削除できます。

$("#Gpic1").css("background-color", "transparent");

または、含まれている div を本当に削除したい場合は、画像をページ上の他のオブジェクトの子にする必要があります。絶対配置を使用している場合は、画像を #Gpic1 の代わりに body オブジェクトの子にするだけでよいので、#Gpic1 を削除しても画像は消えません。

// move pic1 to be a child of the body so we can remove Gpic1
$("#pic1").appendTo(document.body);
$("#Gpic1").remove();
于 2013-10-26T06:46:49.547 に答える
0

pic onClick イベントのアニメーションの最後にこれを追加します。

$('#Gpic1').css('background','none');

ここにフィドルがあります。

http://jsfiddle.net/Td6tT/3/

于 2013-10-26T06:52:05.173 に答える