jQuery/CSS3实现图片层叠展开特效

这是一款基于jQuery和CSS3的图片层叠展开特效，让鼠标滑过图片时即可触发这些特效。主要由HTML、CSS以及jQuery代码组成。

HTML代码：

    把要用到的小图片列出来，HTML结构非常简单。

1. <div id="page_wrap"> 
2.   <!--Stack 1  -->
3.   <div class="image_stack" style="margin-left:600px">
4.    <img id="photo1" class="stackphotos" src="images/lanrenzhijia2.jpg"  >
5.     <img  id="photo2" class="stackphotos" src="images/lanrenzhijia3.jpg" >
6.      <img   id="photo3" class="stackphotos"  src="images/lanrenzhijia1.jpg" > 
7.      </div>
8.      <!--Stack 2  -->
9.   <div class="image_stack" style="margin-left:300px">
10.    <img id="photo1" class="stackphotos" src="images/lanrenzhijia4.jpg"  >
11.     <img  id="photo2" class="stackphotos" src="images/lanrenzhijia5.jpg" >
12.      <img   id="photo3" class="stackphotos"  src="images/lanrenzhijia6.jpg" > 
13.      </div>
14.      
15.   <div class="single_photo">
16.     <ul id="pics">
17.       <li><a href="#pic1" title="Photo"><img src="images/lanrenzhijia3.jpg" alt="picture"></a></li>
18.     </ul>
19.   </div>
20. </div>

接下来是CSS，相对复杂一点，因为有用到CSS3相关的一些特性。


CSS代码：

   主要是rotate实现图片翻转折叠的效果，另外指定了0.2s的ease动画。

1. .image_stack img { /* css style for photo stack */
2.     border: none;
3.     text-decoration: none;
4.     position: absolute;
5.     margin-left:0px;
6.     5074px;
7.     height: 5074px;
8. }
9. .image_stack { /* css style for photo stack */
10.     400px;
11.     position: absolute;
12.     margin:60px 10px 10px;
13. }
14. .image_stack img { /* css style for photo stack */
15.     position: absolute;
16.     border: 4px solid #FFF;
17.     box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
18.     -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
19.     -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
20.     z-index: 9999;
21.     /* Firefox */
22.     -moz-transition: all 0.2s ease;
23.     /* WebKit */
24.     -webkit-transition: all 0.2s ease;
25.     /* Opera */
26.     -o-transition: all 0.2s ease;
27.     /* Standard */
28.     transition: all 0.2s ease;
29. }
30. .image_stack #photo1 {  /* position of last photo in the stack */
31.     top: 8px;
32.     left: 108px;
33. }
34. .image_stack #photo2 {/* position of middle photo in the stack */
35.     top: 6px;
36.     left: 104px;
37. }
38. .image_stack #photo3 {/* position of first photo at the top in the stack */
39.     top: 4px;
40.     left: 100px;
41.     right: 100px;
42. }
43. .image_stack .rotate1 {/* rotate last image 15 degrees to the right */
44.     -webkit-transform: rotate(15deg); /* safari and chrome */
45.     -moz-transform: rotate(15deg);/*firefox browsers */
46.     transform: rotate(15deg);/*other */
47.     -ms-transform:rotate(15deg); /* Internet Explorer 9 */
48.     -o-transform:rotate(15deg); /* Opera */
49. }
50. .image_stack .rotate2 {/* css not used*/
51.     -webkit-transform: rotate(0deg); /* safari and chrome */
52.     -moz-transform: rotate(0deg);/*firefox browsers */
53.     transform: rotate(0deg);/*other */
54.     -ms-transform:rotate(0deg); /* Internet Explorer 9 */
55.     -o-transform:rotate(0deg); /* Opera */
56. }
57. .image_stack .rotate3 {/*rotate first image 15 degrees to the left*/
58.     -webkit-transform: rotate(-15deg); /* safari and chrome */
59.     -moz-transform: rotate(-15deg); /*firefox browsers */
60.     transform: rotate(-15deg);/*other */
61.     -ms-transform:rotate(-15deg); /* Internet Explorer 9 */
62.     -o-transform:rotate(-15deg); /* Opera */
63.     cursor: pointer;
64. }

jQuery代码：

1. $(document).ready(function() { 
2. $(".image_stack").delegate('img', 'mouseenter', function() {//when user hover mouse on image with div id=stackphotos 
3.         if ($(this).hasClass('stackphotos')) {//
4.         // 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 
5.             
6.             var $parent = $(this).parent();
7. $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 ! )
8. $parent.find('img#photo2').addClass('rotate2');
9. $parent.find('img#photo3').addClass('rotate3');
10. $parent.find('img#photo1').css("left","150px"); // reposition the first and last image 
11. $parent.find('img#photo3').css("left","50px");
14.         }
15.     })
16.     .delegate('img', 'mouseleave', function() {// when user removes cursor from the image stack
17.         $('img#photo1').removeClass('rotate1');// remove the css class that was previously added to make it to its original position
18.             $('img#photo2').removeClass('rotate2');
19.             $('img#photo3').removeClass('rotate3');
20.             $('img#photo1').css("left","");// remove the css property 'left' value from the dom
21. $('img#photo3').css("left","");
22.         
23.     });;
24. });

     其实jQuery也没什么事情，主要是动态为图片增加和删除类，用addClass和removeClass实现，这样鼠标滑过图片就可以翻转，鼠标离开图片又能够恢复，很不错吧。