jquery多图层叠展示特效代码

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

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

以下是 jquery多图层叠展示特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>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">
        <!-- 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 --><br />
        <br />
        <div class="clear"></div> 
    </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 var imgLoaded = 0;
	//for checking if all images are loaded $('#pictures').append('<div id="loader"></div>');
	//append the loader div,it overlaps all pictures $('#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> $(new Image()).attr('src',$(this).attr('src')).load(function(){
	//create new image object and have a callback when it's loaded imgLoaded++;
	//one more image is loaded if(imgLoaded == z){
	//do we have all pictures loaded? $('#loader').fadeOut('slow');
	//if so fade out the loader div}
}
);
}
);
	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):

.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,.grid_4{width:220px}
.container_12 .grid_6,.container_16 .grid_8{width:460px}
.container_12 .grid_9,.container_16 .grid_12{width:700px}
.alpha{margin-left:0}
.omega{margin-right:0}
.container_12 .grid_1{width:60px}

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