脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery/CSS3实现图片层叠展开特效，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
复制代码
<p id="page_wrap">
<!--Stack 1 -->
<p 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" >
</p>
<!--Stack 2 -->
<p 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" >
</p>
<p class="single_photo">
<ul id="pics">
<li><a href="#pic1" title="Photo"><img src="images/lanrenzhijia3.jpg" alt="picture"></a></li>
</ul>
</p>
</p>
复制代码
把要用到的小图片列出来，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 p 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","");
});;
});
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery/CSS3实现图片层叠展开特效全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery/CSS3实现图片层叠展开特效所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。