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

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

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

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

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>css3照片堆栈效果</title>
	<!-- CSS Includes -->
	<link href="assets/css/style.css" rel="stylesheet" />
	<link href="assets/css/animate.css" rel="stylesheet" />

</head>
<body>

	<ul id="photos">
		<li><a href="#" style="background-image:url(images/1.jpg)">
		Landscape 5</a></li>
		<li><a href="#" style="background-image:url(images/2.jpg)">
		Landscape 4</a></li>
		<li><a href="#" style="background-image:url(images/3.jpg)">
		Landscape 3</a></li>
		<li><a href="#" style="background-image:url(images/4.jpg)">
		Landscape 2</a></li>
		<li><a href="#" style="background-image:url(images/5.jpg)">
		Landscape 1</a></li>
	</ul>
	
	<a href="#" class="arrow previous"></a>
	<a href="#" class="arrow next"></a>

	<!-- Libraries -->
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/script.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

JS代码(script.js):

$(function(){
	var exits = ['fadeOut','fadeOutDown','fadeOutUpBig','bounceOut','bounceOutDown','hinge','bounceOutUp','bounceOutLeft','rotateOut','rotateOutUpLeft','lightSpeedOut','rollOut'];
	var entrances = ['fadeIn','fadeInDown','fadeInRight','bounceIn','bounceInRight','rotateIn','rotateInDownLeft','lightSpeedIn','rollIn','bounceInDown' ];
	var photos = $('#photos'),ignoreClicks = false;
	$('.arrow').click(function(e,simulated){
	if(ignoreClicks){
	// If clicks on the arrows should be ignored,// stop the event from triggering the rest// of the handlerse.stopImmediatePropagation();
	return false;
}
// Otherwise allo this click to proceed,// but raise the ignoreClicks flagignoreClicks = true;
	if(!simulated){
	// Once the user clicks on the arrows,// stop the automatic slideshowclearInterval(slideshow);
}
}
);
	// Listen for clicks on the next arrow$('.arrow.next').click(function(e){
	e.preventDefault();
	// The topmost elementvar elem = $('#photos li:last');
	// Apply a random exit animationelem.addClass('animated').addClass( exits[Math.floor(exits.length*Math.random())] );
	setTimeout(function(){
	// Reset the classeselem.attr('class','').prependTo(photos);
	// The animation is complate!// Allow clicks again:ignoreClicks = false;
}
,1000);
}
);
	// Listen for clicks on the previous arrow$('.arrow.previous').click(function(e){
	e.preventDefault();
	// The bottom-most elementvar elem = $('#photos li:first');
	// Move the photo to the top,and// apply a random entrance animationelem.appendTo(photos).addClass('animated').addClass( entrances[Math.floor(entrances.length*Math.random())] );
	setTimeout(function(){
	// Remove the classesselem.attr('class','');
	// The animation is complate!// Allow clicks again:ignoreClicks = false;
}
,1000);
}
);
	// Start an automatic slideshowvar slideshow = setInterval(function(){
	// Simulate a click every 1.5 seconds$('.arrow.next').trigger('click',[true]);
}
,1500);
}
);

CSS代码(style.css):

/*-------------------------Simple reset--------------------------*/
*{margin:0;padding:0;}
/*-------------------------General Styles--------------------------*/
html{background-color:#d6dee1;background-image:-moz-radial-gradient(circle closest-corner,#f6f9fa 0%,#d6dee1 100%);background-image:-webkit-radial-gradient(circle closest-corner,#f6f9fa 0%,#d6dee1 100%);background-image:radial-gradient(circle closest-corner,#f6f9fa 0%,#d6dee1 100%);}
body{font:14px/1.3 'Segoe UI',Arial,sans-serif;position:relative;min-height:500px;}
a,a:visited{outline:none;color:#1c4f64;}
a:hover{text-decoration:none;}
section,footer,header{display:block;}
/*----------------------------Photos-----------------------------*/
#photos{margin:0 auto;padding-top:120px;width:450px;position:relative;}
#photos li{position:absolute;width:450px;height:450px;overflow:hidden;background-color:#fff;box-shadow:1px 1px 1px #ccc;z-index:10;-webkit-animation-duration:1s;-moz-animation-duration:1s;animation-duration:1s;}
#photos li a{position:absolute;top:6px;left:6px;right:6px;bottom:6px;background-size:cover;text-indent:-9999px;overflow:hidden;}
/*----------------------------Previous / Next arrows-----------------------------*/
a.arrow{width:33px;height:33px;background:url('../img/arrows.png') no-repeat;position:absolute;top:340px;opacity:0.9;}
a.arrow:hover{opacity:1;}
a.arrow.previous{left:50%;background-position:0 0;margin-left:-340px;}
a.arrow.next{right:50%;background-position:-33px 0;margin-right:-340px;}
/*----------------------------The Demo Footer-----------------------------*/
footer{background-color:#080808;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,0.4);height:40px;left:0;position:fixed;width:100%;z-index:100000;}
footer h2{font-size:14px;font-weight:normal;position:absolute;top:0;left:50%;bottom:0;margin-left:-420px;padding:13px 20px 0;border:1px solid #000;border-width:0 1px;background-color:rgba(0,0,0,0.6);box-shadow:0 0 5px #000 inset;line-height:1;margin-top:0;}
footer h2 a{color:#EEEEEE !important;text-decoration:none !important;}
footer h2 i{font-style:normal;color:#888;}
#tzine-download{opacity:0.9;background-color:#257691;font-size:11px;text-align:center;text-transform:uppercase;width:150px;height:28px;line-height:28px;text-decoration:none !important;display:inline-block;border-radius:2px;color:#fff !Important;font-weight:bold;box-shadow:0 -1px 2px #1e5e74 inset;border-top:1px solid #26849c;text-shadow:1px 1px 1px #1e6176;margin-top:6px;}
#tzine-download:hover{opacity:1;}
#tzine-actions{position:absolute;top:0;width:500px;right:50%;margin-right:-420px;text-align:right;}
#tzine-actions iframe{display:inline-block;height:21px;width:95px;position:relative;float:left;margin-top:11px;}

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