css+js实现照片层叠拖动分层显示效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：css+js实现照片层叠拖动分层显示效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">

<!--可无视-->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.min.css">
<style>
    body, html { font-size: 100%; 	padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

body{
	background: #f9f7f6;
	color: #404d5b;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
}
a{color: #2fa0ec;text-decoration: none;outline: none;}
a:hover,a:focus{color:#74777b;}
</style>


<style>
@-webkit-keyframes animation{from{opacity:0; -webkit-transform:scale(1.2) rotateX(45deg);transform:scale(1.2) rotateX(45deg);} to{ }}

@-webkit-keyframes animation2{from{opacity:0; -webkit-transform:scale(1.2) rotateX(45deg);transform:scale(1.2) rotateX(45deg);} to{ }}
body {
   background:#1c1c1c;
   /*-webkit-perspective:1000px;*/
   /*overflow:hidden;*/
}
.slider div p{color:#1c1c1c;position:absolute;bottom:-55px; font-family:Raleway; font-size:16px;}
.slider{
	-webkit-animation:animation ease 1s;animation-delay:.8s;animation-fill-mode:backwards;
	margin: 0 auto;
	height:360px;
	width:240px;
	padding:40px;
	top:100px;
	perspective:1000px;
	transition:ease-in-out .2s;
	/*-webkit-transform:rotateX(45deg);
	-webkit-transform-style:preserve-3d;
	position:absolute;*/
}
/*.slider:active{ -webkit-transform:rotateZ(10deg);}*/
.slide img { text-align:center;width:100%; height:100%; -webkit-user-drag:none;user-drag:none;-moz-user-drag:none; border-radius:2px; }
.slide{
	-webkit-user-select:none;
	user-select:none;
	-moz-user-select:none;
	position:absolute;
	height:280px;
	width:240px;
	box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3);
	background:#fcfcfc;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	text-align:center;
	/*overflow:hidden;*/
	border:12px white solid;
	box-sizing:border-box;
	border-bottom:55px white solid;
	border-radius:5px; 
}
.transition {
	-webkit-transition: cubic-bezier(0,1.95,.49,.73) .4s ;
	-moz-transition: cubic-bezier(0,1.95,.49,.73) .4s ;
	transition: cubic-bezier(0,1.95,.49,.73) .4s ;
}
</style>
<!--[if IE]>
	<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>


<div class="slider">
	<div class="slide" ><img src="//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90" /><p>rutrum tellus a tempus :)</p></div>
	<div class="slide"><img src="//repo.bfw.wiki/bfwrepo/image/5d653a3d2a1fe.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90" /><p>litora torquent per conubia</p></div>
	<div class="slide"><img src="//repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90" /><p>sed consectetur faucibus</p></div>
	<div class="slide" ><img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90" /><p>eleifend tempus justo</p></div>
</div>


<script type="text/javascript">
window.addEventListener('load', onWndLoad, false);
function onWndLoad() {
	var slider = document.querySelector('.slider');
	var sliders = slider.children;
	var initX = null;
	var transX = 0;
	var rotZ = 0;
	var transY = 0;
	var curSlide = null;
	var Z_DIS = 50;
	var Y_DIS = 10;
	var TRANS_DUR = 0.4;
	var images = document.querySelectorAll('img');
	for (var i = 0; i < images.length; i++) {
	
		images[i].onmousemove = function (e) {
			e.preventDefault();
		};
.........完整代码请登录后点击上方下载按钮下载查看