废话多说无益，直接上两张图片看效果，然后进入代码环节
微信截图_20170503192746.png
微信截图_20170503192802.png
准备阶段
1）找十张左右的大小差别不大的照片（最好120*180的 比例在4:6）
2）创建一个dome文件，里面创建一个html文件和一个img的文件夹，把照片放进去img文件夹中
-注意-：阅读下面的东西之前，请先把代码复制到你的html文档中，把照片的名字更改一下，先去自己看下效果，然后再回来阅读。
3）效果分析{
1、从最终呈现的效果来看，是需要一个3D的场景的
2、照片是围成一个圈的，并且自身具备一定的角度的
3、可以上下左右移动，并且带有一定的惯性运动（鼠标事件）
4、开场动画是从中间一个个出现的
}
4）{
1、首先肯定是先把页面搭建起来，也就是把body里的东西先让他呈现出来，不要先管他动不动，怎么动的问题
2、搭建3D场景，设置transform的各项属性，让照片围成成一个圆
3、拖动的三个鼠标事件（按下鼠标的效果，按着移动的效果，抬起鼠标的效果）
4、添加底座和开场动画
}
开始编写代码
我依然还是采用边写代码边注释解释的方式来写这下面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽旋转相册</title>
<style>
/*去掉内外间距*/
*{
padding:0;
margin:0;
}
body{
background-color:black;/*整个后面大的背景*/
overflow:hidden;/*取消滚动条*/
}
#perspective{
/*设置景深*/
perspective:800px;
}
/*设置盛放照片的div*/
#wrap{
width:120px;
height:180px;
/*border:1px solid yellow;*/ /*建议学习的同仁把这个恢复后再运行，方便理解代码，但是印象美观*/
position:relative;
margin:0 auto;
/*创建3D场景*/
transform-style: preserve-3d;
/*让照片出现后上下呈现一定的角度*/
transform:rotateX(-10deg) rotateY(0deg);
}
/*给图片添加样式和属性*/
#wrap img{
position:absolute;
width:100%;
height:100%;
border-radius:5px;
/*给照片添加圆角和阴影*/
box-shadow: 0 0 2px pink;
transform:rotateY(0deg) translateZ(0px);
/*倒影:朝向 偏移 遮盖 *//*线性渐变(从哪里开始) 开始时候的颜色 结束时候的颜色*/
-webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%);
}
/*底座光环*/
#wrap p{
width:1200px;
height:1200px;
/*径向渐变 (从哪里开始) 扩散程度 开始时候的颜色 结束时候的颜色*/
background:-webkit-radial-gradient(center center,600px 600px,rgba(244,23,134,0.2),rgba(0,0,0,0));
border-radius:100%;
position:absolute;
left:50%;
top:102%;
margin-left:-600px;
margin-top:-600px;
transform:rotateX(90deg);
}
</style>
<script type="text/javascript">
window.onload = function(){
var oWrap = document.getElementById('wrap');
var oImg = document.getElementsByTagName('img');
var oImgLength = oImg.length;
var Deg = 360/oImgLength;
var nowX;
var nowY;
var lastX;
var lastY;
var minuseX = 0;
var minuseY = 0;
var roX = -10;
var roY = 0;
var timer;
// 给img设置旋转度
for(var i=0;i<oImgLength;i++){
oImg[i].style.transform = 'rotateY('+i*Deg+'deg)translateZ(350px)'
// 语法:transition: property duration timing-function delay;
// property:设置过渡效果的 CSS 属性的名称
// duration:完成过渡效果需要多少秒或毫秒
// timing-function:速度效果的速度曲线
// delay:过渡效果何时开始
oImg[i].style.transition = 'transform 1s '+ (oImgLength-1-i)*0.1 +'s';
}
mTop();
window.onresize = mTop; // 窗口调整大小的时候
function mTop(){
var wH = document.documentElement.clientHeight;
oWrap.style.marginTop = wH / 2 - 180 + 'px';
}
// 三个鼠标事件
// 按下 按下后移动 提起
// 第一个
document.onmousedown = function(ev){
ev = ev ||window.event;
lastX = ev.clientX;
lastY = ev.clientY;
// console.log("前一点X坐标"+lastX)
// console.log("前一点Y坐标"+lastY)
//第二个事件
//
//移动事件
// 给wrap添加transform属性
//需要获取的的是鼠标移动的坐标值 求差值 把差值作为rotate的值
this.onmousemove = function(ev){
ev =ev||window.event;
clearInterval(timer);
nowX = ev.clientX;
nowY = ev.clientY;
// 求差值
minuseX = nowX - lastX;
minuseY = nowY - lastY;
//更新wrap的旋转角度，拖拽越快--> minus变化越大->
//roY变化越大 旋转越快
roX -= minuseY*0.1
roY += minuseX*0.2
console.log(roX)
// console.log("当前点X坐标"+lastX)
// console.log("当前点Y坐标"+lastY)
oWrap.style.transform ='rotateX('+roX+'deg) rotateY('+roY+'deg)';
// 随着鼠标移动,当前点成前一点
lastX = nowX;
lastY = nowY;
}
// 第三个事件 提起
//
this.onmouseup = function(){
// 清除移动事件
this.onmousemove = null;
//设置定时器 让差值逐渐减小 形成类似惯性的运动效果
timer =setInterval(function(){
minuseX *= 0.95; // 让差值无限次乘以一个小数 值会无限接近零 但不会等于零
//console.log(minuseX)
minuseY *= 0.95;
roY += minuseX*0.2;
roX -= minuseY*0.1;
oWrap.style.transform ='rotateX('+roX+'deg)rotateY('+roY+'deg)';
if(Math.abs(minuseX)<0.2&&Math.abs(minuseY)<0.1){
clearInterval(timer)
}
},13)
}
return false;// 取消鼠标的默认事件
}
}
</script>
</head>
<body>
<div id="perspective">
<div id="wrap">
<p></p>
</div>
</div>
</body>
</html>
网友评论