近大远小.gif
前置知识：CSS position，js map函数
实现原理：
视觉原理：远处的物体移动慢，近处的物体移动快
实现原理：在鼠标移动的时候，在原 div 的原有位置上+鼠标移动的距离和z-index的乘积
Q:为什么要乘z-index?
A:在初始div的时候要给每个都设置z-index，越大（离你越近）的物体z-index越高or大
步骤：
①获取每个div
②获取每个div当前的left和top
③鼠标移动时给每个元素加上鼠标移动距离*z-index；
代码实现：
〇HTML代码：
<div style="width:50px;height:50px;left:210px;top:50px;position: absolute;z-index: 1;background: blueviolet"></div>
<div style="width:100px;height:100px;left:50px;top:130px;position: absolute;z-index: 2;background: rgb(223, 66, 139)"></div>
<div style="width:150px;height:150px;left:300px;top:150px;position: absolute;z-index: 3;background: rgb(65, 163, 139)"></div>
<div style="width:200px;height:200px;left:50px;top:400px;position: absolute;z-index: 4;background: rgb(226, 197, 35)"></div>
①获取每个div：
let aDiv=document.getElementsByTagName('div');
②获取每个div当前的left和top：
let oldPos=Array.from(aDiv).map(div=>{
return {
left:div.offsetLeft,
top:div.offsetTop
}
});
③鼠标移动时给每个元素加上鼠标移动距离*z-index；
document.onmousemove=function(ev){
let event=ev||window.event;
Array.from(aDiv).forEach((div,index)=>{
div.style.left=oldPos[index].left+event.clientX*div.style.zIndex/100+'px'; //除100是为了div移动的不要太快
div.style.top=oldPos[index].top+event.clientY*div.style.zIndex/100+'px';//同理
})
}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload=function(){
let aDiv=document.getElementsByTagName('div');
let oldPos=Array.from(aDiv).map(div=>{
return {
left:div.offsetLeft,
top:div.offsetTop
}
});
document.onmousemove=function(ev){
let event=ev||window.event;
Array.from(aDiv).forEach((div,index)=>{
div.style.left=oldPos[index].left+event.clientX*div.style.zIndex/100+'px';
div.style.top=oldPos[index].top+event.clientY*div.style.zIndex/100+'px';
})
}
}
</script>
</head>
<body>
<div style="width:50px;height:50px;left:210px;top:50px;position: absolute;z-index: 1;background: blueviolet"></div>
<div style="width:100px;height:100px;left:50px;top:130px;position: absolute;z-index: 2;background: rgb(223, 66, 139)"></div>
<div style="width:150px;height:150px;left:300px;top:150px;position: absolute;z-index: 3;background: rgb(65, 163, 139)"></div>
<div style="width:200px;height:200px;left:50px;top:400px;position: absolute;z-index: 4;background: rgb(226, 197, 35)"></div>
</body>
</html>
