git地址：https://github.com/Macixsq1/github404.git
開始學前端的時候，發現了github404的頁面非常有趣，當時覺得很神奇，一直不明白怎麼實現的呀，最近又看到，隨便想了一下，發現其實並不複雜，動手寫了一個demo.
使用angularjs搭建了初步頁面，實際上核心使用了原生js的操作，效果不錯。
核心代碼如下：
con1.js
angular.module('myapp',[])
.controller("con1",function($scope,$document){
function $(id){
return document.querySelector(id);
}
function set(elem,top,left,posX,posY,bool){
if(bool){
elem.style.top = posY+top +'px';
elem.style.left = posX+left +'px';
}else{
elem.style.top = top - posY +'px';
elem.style.left = left - posX +'px';
}
}
let bgdiv = $('#bg-div'),
img0 = $('#img0'),
img1 = $('#img1'),
img2 = $('#img2'),
img3 = $('#img3'),
img4 = $('#img4'),
img5 = $('#img5');
function main(posX,posY){
bgdiv.style.height = 100 - posY + 'px';
set(img0,67,62,posX,posY,true);
set(img1,90,350,posX,posY,true);
set(img2,145,427,posX,posY,true);
set(img3,292,366,posX,posY,true);
set(img4,127,800,posX,posY,false);
set(img5,82,492,posX,posY,false);
}
main(0,0);
$document.on('mousemove',function(e){
let posY = e.clientY/40;
let posX = e.clientX/40;
main(posX,posY);
});
})index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body ng-controller="con1">
<div class="container">
<div class="bg-div" id="bg-div"></div>
<div class="in-container">
<img class="myimg" style="z-index: 6" id="img0" src="./image/404.png">
<img class="myimg" style="z-index: 5" id="img1" src="./image/guy.png">
<img class="myimg" style="z-index: 4" id="img2" src="./image/ship.png">
<img class="myimg" style="z-index: 3" id="img3" src="./image/shadow.png">
<img class="myimg" style="z-index: 2" id="img4" src="./image/building.png">
<img class="myimg" style="z-index: 1" id="img5" src="./image/build2.png">
</div>
</div>
</body>
<script type="text/javascript" src="./angular.min.js"></script>
<script type="text/javascript" src="./con1.js"></script>
</html>index.css
html,body{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 400px;
background-color:#FFDAB9;
}
.bg-div{
width: 100%;
height: 100px;
background-color:#2763a0;
position: absolute;
top: 0px;
left: 0px;
}
.in-container{
margin: 0px auto;
width: 940px;
height: 400px;
position: relative;
}
.myimg{
position: absolute;
}
最後效果截圖：
會隨着頁面鼠標移動，而且移動的方式有差別，會體現出層次感。
分析：核心的方法是使用document.querySelector獲取dom，然後dom.style.top這樣的方式操作style，監聽鼠標移動，修改top,left屬性。當然前提是需要position:absolute;
細節是前面幾個圖片和後邊兩張圖片改變方式不同，一個是隨着鼠標右移，一個是左移，一個上移，另一個會下移，這樣就會顯示出遠近的錯覺。