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. It consists mainly of HTML, CSS, and jquery code. HTML code: Make a list of the small images you want to use, and the HTML structure is very simple. <div id= "Page_wrap" > <!--Stack 1-- <div class= "Image_stack" style= "margin-left:600px" > </div> <!--Stack 2-- <div class= "Image_stack" style= "margin-left:300px" > </div> <div class= "Single_photo" > <ul id= "Pics" > <li><a href= "#pic1" title= "Photo" ></a> </li> </ul> </div> </div> The next step is CSS, which is a bit more complicated because it is useful for some of the CSS3 related features. CSS code: Mainly is rotate realizes the picture flips the folding effect, in addition specifies the 0.2s ease animation. . image_stack img {/* CSS style for photo stack */ Border:none; Text-decoration:none; Position:absolute; margin-left:0px; width:5074px; height:5074px; } . 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 from 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; } jquery Code: $ (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 isn't really defined in CSS, it's only assigned to each images in the photo stack to trigger t He 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, it rotates to th E correct degree in the correct direction (all 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 is previously added to make it to its original Positi On $ (' 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 can be flipped over the picture to flip, the mouse away from the image can be restored, very good.