1

このコードでフェード効果を得るにはどうすればよいですか? 親指をクリックすると、「大きな」画像がフェードするはずです!

これはギャラリーのデモですhttp://workshop.rs/demo/gallery-in-4-lines/ 

<div class="box">
        <div id="panel"><img id="largeImage" src="pic/image_08_large.jpg" /> </div>
        <div class="text"> Die Idee und das Konzept</div>
        <div id="thumbs">
        <img src="pic/image_08_thumb.jpg" alt="1st image description" />
        <img src="pic/image_09_thumb.jpg" alt="2nd image description" />
        <img src="pic/image_10_thumb.jpg" alt="3rd image description" />

        </div>

Javascript

<script>

$('#thumbs').delegate('img','click', function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
$('#description').html($(this).attr('alt'));
});

</script>

CSS:

#thumbs { padding-top: 10px; overflow: hidden; }
#thumbs img, #largeImage { border: 1px solid gray; padding: 4px; 
background-color:white; cursor: pointer; }
#thumbs img { float: left; margin-left:60px;  margin-top:10px; }
#description { background: black; color: white; position: absolute; bottom: 0;   
padding: 10px 20px; width: 525px; margin: 5px; }
#panel { position: relative; }
4

2 に答える 2

0

コードでは、目的の効果を達成できません。したがって、次のことを行う必要があります。

  • (...目的の efx を取得するには:) 「パネル」内に 2 つの画像を配置します (クリックした画像のクローンを作成できます!)
  • 1:クローンを所定の位置に配置します (最初は非表示にする必要があります) 。
  • 2:古いイメージを薄くする
  • 3: 次のようなクローン(新しい) イメージでフェードインします。

jsBin のデモ例

$('.thumbs').on('click','img', function(){
        var $thisPanel = $(this).parents('.gallery').find('.panel');
        var clone = $(this).clone().hide();
        clone.appendTo($thisPanel);
        $thisPanel.find('img').eq(0).fadeTo(600,0,function(){
           $(this).remove();
        });
        clone.fadeTo(600,1);  
        $('.description').html($(this).attr('alt'));
});

ページに複数ある要素にはIDを使用せず、代わりにclassを使用してください。(デモを参照):

<div class="gallery">
    <div class="panel">
        <img src="http://placehold.it/565x300/cf5" />
        <div class="description">First image description</div>
    </div>
 
    <div class="thumbs">
        <img src="http://placehold.it/565x300/cf5" alt="1st image description" />
        <img src="http://placehold.it/565x300/f0f" alt="2nd image description" />
        <img src="http://placehold.it/565x300/444" alt="3rd image description" />
    </div>
</div>

そしてCSS：

  .thumbs { padding-top: 10px; overflow: hidden;}
    .thumbs img, .panel img {
     border: 1px solid gray;
     padding: 4px;
     background-color: white;
     cursor: pointer;
    }
  .panel img{
    position:absolute;
  }
    .thumbs img {
     float: left;
     margin-right: 3px;
    width:100px;
    }
    .description {
     background: black;
     color: white;
     position: absolute;
     z-index:2;
     bottom: 0;
     padding: 10px 20px;
     width: 525px;
     margin: 5px;
    }
  .panel { position: relative; height:310px; }
于 2012-05-26T07:23:52.180 に答える
0

Have you try this out 

$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'))
.hide().fadeIn('slow');

I haven't tried but i think this might works.

于 2012-05-14T07:33:22.927 に答える