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