3D 照片环 || 鼠标滚动
2019-05-26 本文已影响7人
CondorHero
CSS照片环构建完成，如何实现滚动滚轮来达到照片环滚动。
3D 照片环加鼠标滚动
一、3D 照片环
-
使用CSS3 和 定位技术让九张类照片定位叠加在一起。
图片叠加
-
使用jQuery遍历打开图片
$("ul li").each(function(i){
$(this).css("transform","rotateY("+(i*40)+"deg) translateZ(500px)");
});
代码里面的四十是 360 / 9得来的。
打开图片
- 拖拽的实现
拖拽的实现没什么难点，不使用 jQuery 插件的兼容火狐。经典的兼容策略在下方的滚轮事件。这里奉上源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D照片环</title>
<style>
*{margin:0;padding:0;}
body{
background-color: black;
color: #ccc;
cursor: pointer;
}
.stage {
width: 600px;
height: 600px;
margin: 100px auto;
position: relative;
/*background-color: #0f0;*/
perspective:1150px;
}
ul {
list-style: none;
width: 250px;
height: 130px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
transition:all 0.3s ease 0s;
transform-style: preserve-3d;
}
ul li {
width: 250px;
line-height: 130px;
text-align: center;
font-size: 80px;
color: #fff ;
/*绝对定位让盒子在一起*/
position: absolute;
}
ul li:nth-child(1){background-color: rgba(255,0,0,1);}
ul li:nth-child(2){background-color: rgba(0,255,0,1);}
ul li:nth-child(3){background-color: rgba(78, 69, 189,1);}
ul li:nth-child(4){background-color: rgba(0,255,255,1);}
ul li:nth-child(5){background-color: rgba(255,255,0,1);}
ul li:nth-child(6){background-color: rgba(255,34,255,1);}
ul li:nth-child(7){background-color: rgba(256,67,55,1);}
ul li:nth-child(8){background-color: rgba(170, 197, 85, 1);}
ul li:nth-child(9){background-color: rgba(65,0,255,1);}
</style>
</head>
<body>
<div class="stage">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script>
//使用jQuery遍历打开图片
$("ul li").each(function(i){
$(this).css("transform","rotateY("+(i*40)+"deg) translateZ(500px)");
});
//
var nowdeg = 0;
// 自锁截流作用
var lock = true;
$(".stage").mousewheel(function(event,i){
// JQuery的i用来类似下面的功能语句
// var i = event.wheelDelta > 0 ? 1 : -1 ;
event = event || window.event;
if(!lock)return;
if(event.preventdefault){
event.preventDefault();
}else {
event.returnValue = false;
}
nowdeg += i*40;
$("ul").css("transform","rotateY("+ nowdeg +"deg)");
// 自锁
lock = false;
// 解锁
setTimeout(function(lcok){
lock =true;
},500);
});
// 拖拽的实现
$(document).mousedown(function(event){
// 记录鼠标第一次出现的位置
var startX = event.clientX;
var startY = event.clientY;
console.log(startX,startY);
// 关掉移动的过度效果让移动动作更加自然
$("ul").css("transition","none");
$(document).mousemove(function(event){
// 记录真实移动的位置
var deltaX = event.clientX - startX;
var deltaY = event.clientY - startY;
console.log(deltaX,deltaY);
// 通过移动的位置变量来改动旋转效果
$("ul").css("transform","rotateX(" + -deltaY / 5 + "deg) rotateY(" + deltaX / 5 + "deg)");
return false;
});
});
$(document).mouseup(function(){
$(document).off("mousemove");
});
</script>
</body>
</html>
二、滚轮事件
以前只学过页面的卷动事件 （window.scrollDOM一级添加的事件）。卷动事件可以由鼠标滚轮，方向键来触发。都是通过卷动页面来实现的，今天的照片环明显的用滚动事件来实现，滚动滚轮在大页面不动的情况下来触发事件。这就得用到mousewheel事件。
box.onmousewheel = function(event){
event = event || window.event;//兼容IE
oDiv.innerHTML = event.wheelDelta;
}
当我在我定义的盒子上滚动的时候，发现 event.wheelDelta出现的值往上滚动是120，往
下滚动是 -120，有时候滚得快会发现页面出现正负 120 的整数，其实没什么卵用，只能分辨鼠标是往上滚了还是往下滚了。onmousewhee l事件的触发，是滚轮滚动一“咯噔”的时候，触发一次。
不过非常遗憾的是滚轮事件，火狐浏览器不兼容。火狐使用自己的专用事件
DomMouseWheel，并且这个事件只能通过标准的DOM2级的事件绑定方式添加。
box.addEventListener("DOMMouseScroll",function(event){
oDiv.innerHTML = event.detail;
},false);
表示滚动方向的事件的属性叫做 event.detail。它的滚动方向往上，-3；滚动方向往下，+3。
如何DOM二级添加事件的用法？
element.addEventListener(event, function, useCapture);
event 必须。字符串，指定事件名。
function 必须。指定要事件触发时执行的函数。
useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行false- false- 默认。事件句柄在冒泡阶段执行。
所以平常在写程序为了兼容火狐浏览器的滚轮事件，就得写两个监听，对方浏览器遇到不认识的事件会静默处理，不过调用的函数的写两个使用条件来判断。
代码如下：
function mousewheel(event){
event = event || window.event; //→ 解决IE6、7、8和高级浏览器的不兼容
//阻止默认事件
if(event.preventDefault){ //→ 解决IE6、7、8和高级浏览器的不兼容
event.preventDefault();
}else{
event.returnValue = false;
//清除了默认事件会返回false。IE浏览器接受的。
}
//Chrome、IE用的是event.wheelDelta;
if(event.wheelDelta){ //→ 解决火狐和其他浏览器的不兼容
var direction = event.wheelDelta > 0 ? 1 : -1;
}else if(event.detail){
//火狐用的是event.detail;
var direction = event.detail > 0 ? -1 : 1;
}
box.innerHTML = direction;
}
//这个事件处理程序中，已经屏蔽了3个事情的不兼容。
//给IE、CHrome添加事件
box.onmousewheel = mousewhee;
//给火狐添加事件
box.addEventListener("DOMMouseScroll",mousewheel,false);
趁此机会把前面学习时制作的一个，网页滚动添加一下鼠标事件监听。
鼠标滚轮事件：https://www.jianshu.com/p/94a3059c1dec
三、拖拽的改进
遗留问题：
- 再次拖拽的时候，照片环立马归到原位，才运动
- 拖拽完成，使用滚轮的时候，不能记住拖拽的位置，只能复位在进行运动。
