javascript - JQuery:图像库向下滑动图像并在 src 中淡入淡出

Question

我有以下代码，可以在单击缩略图时交换主图像:

$('#thumbs img').click(function(){
    var imgsrc = $(this).attr('src');

    $('#mainphoto img').fadeOut(function(){
       $(this).attr('src', imgsrc).fadeIn();
    });
});

这里有一个工作示例:http://clarkeconstructions.com.au/newsite/index.php?id=8

有些图像是纵向照片，有些是横向照片(如果您单击示例中的第二个缩略图)。

我希望能够向下滑动图像，以使横向到纵向的过渡更加平滑，但我不确定如何使用当前的代码来实现这一点。

有人能给我任何关于我将使用什么语法来完成此任务的提示吗？

谢谢

Answer 1

您可以使用的一个技巧是:

• 将所有原始图像尺寸存储在每个图像 data 属性内
• 在将内部图像设置为 H: 100% 和 W: 100% 的情况下对容器 W/H 进行动画处理

jsBin demo

HTML:

<div id="projphotos">
  
  <div id="mainphoto"><img src="" /></div><!--MAINPHOTO-->
  
  <div id="projthumbs">
    <img src="images/image_1.jpg" /> 
    <img src="images/image_2.jpg" /> 
    <img src="images/image_3.jpg" /> 
  </div><!--PROJTHUMBS-->
  
</div>

CSS:

#mainphoto{ /* roXon */
   border-radius: 5px 5px 5px 5px;
   box-shadow: 0 0 5px #888888;
   padding: 10px;
   display:inline-block;
   *dispaly:inline;
   zoom:1;
   width:0;
   height:0;
}
#mainphoto img{
   position:relative;
   margin:0 auto;
   vertical-align:middle;
   width:100%;
   height:100%;
}
#projphotos img {
    /* removed properties */
    background-image: url("tmpimages/billie_holiday.png");
}

jQuery(存储/使用原始图像大小来动画主图像父级:)

$(window).load(function(){
  
  var imgs = $('#projthumbs img');

  $.each(imgs, function(i, el){
    $('<img>', {"src": this.src}).load(function(){
      $(el).data({'h': this.height, 'w': this.width});
      if(i===0){
        $(el).click(); 
      }
    });
  });
    
  $('#projthumbs img').click(function(){ 
      var imgsrc = this.src;
      var orgSize = { h: $(this).data('h'), w: $(this).data('w') };
  
      $('#mainphoto img').stop().fadeTo(400,0,function(){
         $(this).attr('src', imgsrc).fadeTo(400,1);
         $('#mainphoto').animate({height: orgSize.h, width: orgSize.w },400);
      });
  });
  
  $('#projthumbs img').eq(0).click();
});