JQUERY/CSS3 Implement image Cascade expansion effects

This is a jquery and CSS3-based image cascade deployment effect, allowing the mouse to slide over the image to trigger these effects. One of them, like a folding fan, looks very good. Of course, this article is mainly to analyze the use of jquery to achieve this effect, the specific effect can be viewed in the online demo.

You can also view the online demo demo here

Talk about the implementation of the method and code, mainly by the HTML, CSS and jquery code composition.

HTML code:

<DivID= "Page_wrap">   <!--Stack 1 -  <Divclass= "Image_stack"style= "margin-left:600px">   <imgID= "Photo1"class= "Stackphotos"src= "Images/lanrenzhijia2.jpg"  >    <imgID= "Photo2"class= "Stackphotos"src= "Images/lanrenzhijia3.jpg" >     <imgID= "Photo3"class= "Stackphotos"src= "Images/lanrenzhijia1.jpg" >      </Div>     <!--Stack 2 -  <Divclass= "Image_stack"style= "margin-left:300px">   <imgID= "Photo1"class= "Stackphotos"src= "Images/lanrenzhijia4.jpg"  >    <imgID= "Photo2"class= "Stackphotos"src= "Images/lanrenzhijia5.jpg" >     <imgID= "Photo3"class= "Stackphotos"src= "Images/lanrenzhijia6.jpg" >      </Div>       <Divclass= "Single_photo">    <ulID= "Pics">      <Li><ahref= "#pic1"title= "Photo"><imgsrc= "Images/lanrenzhijia3.jpg"alt= "Picture"></a></Li>    </ul>  </Div></Div>

Make a list of the small images you want to use, and the HTML structure is very simple.

The next step is CSS, which is a bit more complicated because it is useful for some of the CSS3 related features.

CSS code:

. 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 of the stack*/Top:4px; Left:100px; Right:100px;}. Image_stack. Rotate1{/*rotate last image of 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 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;}

Look out, the main thing is rotate realize the effect of folding picture, in addition to specify the 0.2s ease animation.

jquery Code:

$ (document). Ready (function() { $(". Image_stack"). Delegate (' img ', ' MouseEnter ',function() {//When user hover mouse in image with Div Id=stackphotos        if($( This). Hasclass (' Stackphotos ')) {//        //The class Stackphotos isn't really defined in CSS, it's 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 all image so, it rotates to the correct degree in the correct direction (15 Degrees one to the left and 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 is previously added to the IT 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", "" "); });;});

In fact, jquery is nothing, mainly dynamic for the picture to add and delete classes, with addclass and removeclass implementation, so that the mouse slide over the picture can be flipped, the mouse away from the picture and can restore, very good bar. You can also download the source code study. source code download >>