jQuery/CSS3實現圖片層疊展開特效

有一款就像扇子展開收攏一樣，看起來效果都非常不錯。當然本文主要還是來分析一下用jQuery實現這一效果的方法，具體效果可以在線上演示中檢視。

你也可以在這裡檢視  線上DEMO演示

說說實現的方法和程式碼吧，主要由HTML、CSS以及jQuery程式碼組成。

HTML程式碼：

<div id="page_wrap"> 
  <!--Stack 1  -->
  <div class="image_stack" style="margin-left:600px">
   <img id="photo1" class="stackphotos" src="images/lanrenzhijia2.jpg"  >
    <img  id="photo2" class="stackphotos" src="images/lanrenzhijia3.jpg" >
     <img   id="photo3" class="stackphotos"  src="images/lanrenzhijia1.jpg" > 
     </div>
     <!--Stack 2  -->
  <div class="image_stack" style="margin-left:300px">
   <img id="photo1" class="stackphotos" src="images/lanrenzhijia4.jpg"  >
    <img  id="photo2" class="stackphotos" src="images/lanrenzhijia5.jpg" >
     <img   id="photo3" class="stackphotos"  src="images/lanrenzhijia6.jpg" > 
     </div>
     
  <div class="single_photo">
    <ul id="pics">
      <li><a href="#pic1" title="Photo"><img src="images/lanrenzhijia3.jpg" alt="picture"></a></li>
    </ul>
  </div>
</div>

把要用到的小圖片列出來，HTML結構非常簡單。

接下來是CSS，相對複雜一點，因為有用到CSS3相關的一些特性。

CSS程式碼：

.image_stack img { /* css style for photo stack */
    border: none;
    text-decoration: none;
    position: absolute;
    margin-left:0px;
    width: 158px;
    height: 158px;
}
.image_stack { /* css style for photo stack */
    width: 400px;
    position: absolute;
    margin:60px 10px 10px;
}
.image_stack img { /* css style for photo stack */
    position: absolute;
    border: 4px solid #FFF;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    /* Firefox */
    -moz-transition: all 0.2s ease;
    /* WebKit */
    -webkit-transition: all 0.2s ease;
    /* Opera */
    -o-transition: all 0.2s ease;
    /* Standard */
    transition: all 0.2s ease;
}
.image_stack #photo1 {  /* position of last photo in the stack */
    top: 8px;
    left: 108px;
}
.image_stack #photo2 {/* position of middle photo in the stack */
    top: 6px;
    left: 104px;
}
.image_stack #photo3 {/* position of first photo at the top in the stack */
    top: 4px;
    left: 100px;
    right: 100px;
}
.image_stack .rotate1 {/* rotate last image 15 degrees to the right */
    -webkit-transform: rotate(15deg); /* safari and chrome */
    -moz-transform: rotate(15deg);/*firefox browsers */
    transform: rotate(15deg);/*other */
    -ms-transform:rotate(15deg); /* Internet Explorer 9 */
    -o-transform:rotate(15deg); /* Opera */
}
.image_stack .rotate2 {/* css not used*/
    -webkit-transform: rotate(0deg); /* safari and chrome */
    -moz-transform: rotate(0deg);/*firefox browsers */
    transform: rotate(0deg);/*other */
    -ms-transform:rotate(0deg); /* Internet Explorer 9 */
    -o-transform:rotate(0deg); /* Opera */
}
.image_stack .rotate3 {/*rotate first image 15 degrees to the left*/
    -webkit-transform: rotate(-15deg); /* safari and chrome */
    -moz-transform: rotate(-15deg); /*firefox browsers */
    transform: rotate(-15deg);/*other */
    -ms-transform:rotate(-15deg); /* Internet Explorer 9 */
    -o-transform:rotate(-15deg); /* Opera */
    cursor: pointer;
}

看出來了吧，主要是rotate實現圖片翻轉折疊的效果，另外指定了0.2s的ease動畫。

jQuery程式碼：

$(document).ready(function() { 
$(".image_stack").delegate('img', 'mouseenter', function() {//when user hover mouse on image with div id=stackphotos 
        if ($(this).hasClass('stackphotos')) {//
        // the class stackphotos is not really defined in css , it is only assigned to each images in the photo stack to trigger the mouseover effect on  these photos only 
            
            var $parent = $(this).parent();
$parent.find('img#photo1').addClass('rotate1');//add class rotate1,rotate2,rotate3 to each image so that it rotates to the correct degree in the correct direction ( 15 degrees one to the left , one to the right ! )
$parent.find('img#photo2').addClass('rotate2');
$parent.find('img#photo3').addClass('rotate3');
$parent.find('img#photo1').css("left","150px"); // reposition the first and last image 
$parent.find('img#photo3').css("left","50px");

        }
    })
    .delegate('img', 'mouseleave', function() {// when user removes cursor from the image stack
        $('img#photo1').removeClass('rotate1');// remove the css class that was previously added to make it to its original position
            $('img#photo2').removeClass('rotate2');
            $('img#photo3').removeClass('rotate3');
            $('img#photo1').css("left","");// remove the css property 'left' value from the dom
$('img#photo3').css("left","");
        
    });;
});

其實jQuery也沒什麼事情，主要是動態為圖片增加和刪除類，用addClass和removeClass實現，這樣滑鼠滑過圖片就可以翻轉，滑鼠離開圖片又能夠恢復，很不錯吧。你也可以下載原始碼研究。

原始碼下載>>