模拟真实翻页的照片展示效果特效代码

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

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

以下是模拟真实翻页的照片展示效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    <title>Demo for - 'Create a unique Gallery by using z-index and jQuery'</title>
    
    <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/960.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
    
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/demo.js"></script>
  </head>
  
  <body>
    <div class="container_12" id="wrapper">
      <div class="grid_8" id="content"><br /><br /><br /><br /><br /><br /><br />
       
        <!-- relevant for the tutorial - start -->
        <div class="grid_6 prefix_1 suffix_1" id="gallery">
          <div id="pictures">
            <img src="images/picture1.png" alt="" />
            <img src="images/picture2.png" alt="" />
            <img src="images/picture3.png" alt="" />
            <img src="images/picture4.png" alt="" />
            <img src="images/picture5.png" alt="" />
          </div>
          <div class="grid_3 alpha" id="prev">
            <a href="#previous">&laquo; Previous Picture</a>
          </div>
          <div class="grid_3 omega" id="next">
            <a href="#next">Next Picture &raquo;</a>
          </div>
        </div>
        <!-- relevant for the tutorial - end -->
        <div class="clear"></div> <p></p>
        <div id="footer">
          (c) 2009 - <a href="#">This Blog Use jQuery</a>
        </div>
      </div>
      <div class="grid_4" id="sidebar">
        <ul>
          <li>
            <h2>What's that?</h2>
            <p>
              This is a Demo Page for a tutorial from <a href="#">This Blog Use jQuery</a>.
              If you come from somewhere else feel free to find out how this Demo works!
            </p>
          </li>
          <li>
            <h2>Pictures</h2>
            <p>
              The pictures are taken from <a href="#">Flickr</a> and they are under the
              Creative Commons Attribution-ShareAlike License.
            </p>
          </li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

JS代码(demo.js):

$(document).ready(function(){
	//perform actions when DOM is ready var z = 0;
	//for setting the initial z-index's var inAnimation = false;
	//flag for testing if we are in a animation $('#pictures img').each(function(){
	//set the initial z-index's z++;
	//at the end we have the highest z-index value stored in the z variable $(this).css('z-index',z);
	//apply increased z-index to <img>}
);
	function swapFirstLast(isFirst){
	if(inAnimation) return false;
	//if already swapping pictures just return else inAnimation = true;
	//set the flag that we process a image var processZindex,direction,newZindex,inDeCrease;
	//change for previous or next image if(isFirst){
	processZindex = z;
	direction = '-';
	newZindex = 1;
	inDeCrease = 1;
}
//set variables for "next" action else{
	processZindex = 1;
	direction = '';
	newZindex = z;
	inDeCrease = -1;
}
//set variables for "previous" action $('#pictures img').each(function(){
	//process each image if($(this).css('z-index') == processZindex){
	//if its the image we need to process $(this).animate({
	'top':direction + $(this).height() + 'px'}
,'slow',function(){
	//animate the img above/under the gallery (assuming all pictures are equal height) $(this).css('z-index',newZindex) //set new z-index .animate({
	'top':'0'}
,'slow',function(){
	//animate the image back to its original position inAnimation = false;
	//reset the flag}
);
}
);
}
else{
	//not the image we need to process,only in/de-crease z-index $(this).animate({
	'top':'0'}
,'slow',function(){
	//make sure to wait swapping the z-index when image is above/under the gallery $(this).css('z-index',parseInt($(this).css('z-index')) + inDeCrease);
	//in/de-crease the z-index by one}
);
}
}
);
	return false;
	//don't follow the clicked link}
$('#next a').click(function(){
	return swapFirstLast(true);
	//swap first image to last position}
);
	$('#prev a').click(function(){
	return swapFirstLast(false);
	//swap last image to first position}
);
}
);

CSS代码(960.css):

.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}
.container_12 .grid_3,.container_16 .grid_4{width:220px}
.container_12 .grid_6,.container_16 .grid_8{width:460px}
.container_12 .grid_9,.container_16 .grid_12{width:700px}
.container_12 .grid_12,.container_16 .grid_16{width:940px}
.alpha{margin-left:0}
.omega{margin-right:0}
.container_12 .grid_1{width:60px}
.container_12 .grid_2{width:140px}
.container_12 .grid_4{width:300px}
.container_12 .grid_5{width:380px}
.container_12 .grid_7{width:540px}
.container_12 .grid_8{width:620px}
.container_12 .grid_10{width:780px}
.container_12 .grid_11{width:860px}
.container_16 .grid_1{width:40px}
.container_16 .grid_2{width:100px}
.container_16 .grid_3{width:160px}
.container_16 .grid_5{width:280px}
.container_16 .grid_6{width:340px}
.container_16 .grid_7{width:400px}
.container_16 .grid_9{width:520px}
.container_16 .grid_10{width:580px}
.container_16 .grid_11{width:640px}
.container_16 .grid_13{width:760px}
.container_16 .grid_14{width:820px}
.container_16 .grid_15{width:880px}
.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}
.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}
.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}
.container_12 .prefix_1{padding-left:80px}
.container_12 .prefix_2{padding-left:160px}
.container_12 .prefix_4{padding-left:320px}
.container_12 .prefix_5{padding-left:400px}
.container_12 .prefix_7{padding-left:560px}
.container_12 .prefix_8{padding-left:640px}
.container_12 .prefix_10{padding-left:800px}
.container_12 .prefix_11{padding-left:880px}
.container_16 .prefix_1{padding-left:60px}
.container_16 .prefix_2{padding-left:120px}
.container_16 .prefix_3{padding-left:180px}
.container_16 .prefix_5{padding-left:300px}
.container_16 .prefix_6{padding-left:360px}
.container_16 .prefix_7{padding-left:420px}
.container_16 .prefix_9{padding-left:540px}
.container_16 .prefix_10{padding-left:600px}
.container_16 .prefix_11{padding-left:660px}
.container_16 .prefix_13{padding-left:780px}
.container_16 .prefix_14{padding-left:840px}
.container_16 .prefix_15{padding-left:900px}
.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}
.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}
.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}
.container_12 .suffix_1{padding-right:80px}
.container_12 .suffix_2{padding-right:160px}
.container_12 .suffix_4{padding-right:320px}
.container_12 .suffix_5{padding-right:400px}
.container_12 .suffix_7{padding-right:560px}
.container_12 .suffix_8{padding-right:640px}
.container_12 .suffix_10{padding-right:800px}
.container_12 .suffix_11{padding-right:880px}
.container_16 .suffix_1{padding-right:60px}
.container_16 .suffix_2{padding-right:120px}
.container_16 .suffix_3{padding-right:180px}
.container_16 .suffix_5{padding-right:300px}
.container_16 .suffix_6{padding-right:360px}
.container_16 .suffix_7{padding-right:420px}
.container_16 .suffix_9{padding-right:540px}
.container_16 .suffix_10{padding-right:600px}
.container_16 .suffix_11{padding-right:660px}
.container_16 .suffix_13{padding-right:780px}
.container_16 .suffix_14{padding-right:840px}
.container_16 .suffix_15{padding-right:900px}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}

CSS代码(main.css):

html{font-size:16px;min-height:100%;margin-bottom:1px;}
body{font-size:62.5%;font-family:Verdana,Arial,sans-serif;color:#555555;background:#22384d url(../images/bg.jpg) repeat-x;}
a{color:#0F67A1;text-decoration:none;}
a:hover{text-decoration:underline;}
#wrapper{background:white url(../images/sidebar_bg.jpg) repeat-y top right;}
#content{}
#content h1{font-size:2.4em;font-weight:normal;line-height:32px;margin:30px 0 50px 0;}
#content p{font-size:1.4em;line-height:22px;margin-bottom:20px;}
/* relevant for the tutorial - start */
 #gallery{position:relative;}
#pictures{position:relative;height:408px;}
#pictures img{position:absolute;top:0;left:0;}
#prev,#next{margin-top:30px;text-align:center;font-size:2.0em;}
/* relevant for the tutorial - end */
#footer{text-align:center;margin:50px 0 20px 0;}
#sidebar{}
#sidebar ul{margin-top:20px;}
#sidebar ul li{font-size:1.2em;padding:20px 0 20px 0;border-bottom:1px solid #dddcdc;line-height:18px;}
#sidebar ul li h2{font-size:1.2em;margin-bottom:8px;}

CSS代码(reset.css):

/* v1.0 | 20080212 */
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,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
/* remember to define focus styles! */
:focus{outline:0;}
/* remember to highlight inserts somehow! */
ins{text-decoration:none;}
del{text-decoration:line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:collapse;border-spacing:0;}

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