jq+css3图片堆栈效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jq+css3图片堆栈效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery+css3图片堆栈折叠</title>
<link rel="stylesheet" href="css/reset.css" media="screen">
<link rel="stylesheet" href="css/lanrenzhijia.css" media="screen">
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/lanrenzhijia.js"></script>
</head>
<body>
<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>
<br><br>
</body>
</html>

JS代码(lanrenzhijia.js):

/* �������������֮�� www.lanrenzhijia.com */
$(document).ready(function(){
	$(".image_stack").delegate('img','mouseenter',function(){
	//when user hover mouse on image with div id=stackphotosif ($(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 onlyvar $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");
	/* �������������֮�� www.lanrenzhijia.com */
}
}
).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","");
}
);
	;
}
);
	/* �������������֮�� www.lanrenzhijia.com */

CSS代码(lanrenzhijia.css):

/* �������������֮�� www.lanrenzhijia.com */
html{padding:0;margin:0;}
body{color:#333333;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:11px;padding:0;margin:0;text-align:left;line-height:1.25em;}
#page_wrap{border:1px solid #DDDDDD;width:990px;height:400px;margin-left:auto;margin-right:auto;margin-top:150px;}
.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;}
ul#pics li{/*css style for the single photo only **/
background:none repeat scroll 0 0 #FFFFFF;box-shadow:1px 1px 1px #999999;display:inline-block;width:153px;height:157px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
ul#pics li img{/*css style for the single photo only **/
width:150px;height:150px;display:block;}
ul#pics li:hover{/*css style for the single photo only **/
-moz-transform:scale(1.1) rotate(0deg);-webkit-transform:scale(1.1) rotate(0deg);-o-transform:scale(1.1) rotate(0deg);-ms-transform:scale(1.1) rotate(0deg);transform:scale(1.1) rotate(0deg);}
.single_photo{/*css style for the single photo only **/
margin-top:80px;margin-left:100px;margin-top:65px;}
h3{margin:25px;}
a,a:visited,a:hover{color:#54A6DE;outline:medium none;text-decoration:none;}
#footer{/* demo footer text */
font-size:9px;margin-top:300px;margin-left:250px;color:#888888;}
#text{margin-top:10px;margin-left:10px;color:#DD4B39;font-type:arial,sans-serif;font-size:17px;}
/* �������������֮�� www.lanrenzhijia.com */

CSS代码(reset.css):

/* �������������֮�� www.lanrenzhijia.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
/* remember to define focus styles! */
:focus{outline:0;}
body{line-height:1;color:black;background:white;}
ol,ul{list-style:none;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
article,aside,dialog,figure,footer,header,hgroup,menu,nav,section{display:block;}
/* �������������֮�� www.lanrenzhijia.com */

附件:下载该文件资源,减少时间成本(增值服务)