利用js完成github404的动态效果
最近学习了github not found 的页面效果，有一些心得想要记录下来。
第一次写文章，若有不对的地方，还请大佬们指出。效果图
我是利用往上下载的一个软件来制作这个gif的，不知道为什么图片有点花了
实验准备
所需的图片资源和源码会在文章底部给出。
开始代码
先来看网页的 body 部分
将所有img 的类名 都以 img_ 开头 在之后的js 中对这些图片操作时就能更方便的通过图片名获得对应的元素，而且这样看上去也更舒服
<body>
<div id="wrapper">
<div id="field">//最大的背景图片
<img src="./images/field.jpg" alt="" class="img_bg">
</div>
<div id="pictures">
//这里将所有的class的名字都以 img_ 开头
<img class="img_text" src="./images/text.png">
<img class="img_cat" src="./images/cat.png">
<img class="img_cat_shadow" src="./images/cat_shadow.png">
<img class="img_speeder" src="./images/speeder.png">
<img class="img_speeder_shadow" src="./images/speeder_shadow.png">
<img class="img_building_1" src="./images/buliding_1.png">
<img class="img_building_2" src="./images/building_2.png">
</div>
</div>
</body>再看一下style
wrapper 为网页中最大的一个容器 field 和 pictures 都在其中
这里对 wrapper 有一个相对网页 body 的定位
之后的图片都对 wrapper 绝对定位
这里只写了.img_cat 和 .img_text 之后的都一样 只是 z-index 来显示出层次感
<style>
html,body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
position: relative;
width: 1680px;
margin: 0 auto;
/* css继承 inherit */
height: 100%;
}
#field {
/* 往上找 找到最近的父级的relative 定位
body 默认 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 370px;
}
#pictures {
opacity: 0;
/* 透明度为0，图片隐藏 */
transition: opacity .5s;
/* 此属性的效果为 图片会在0.5s慢慢呈现 */
}
.img_bg {
position: absolute;
top: -11px;
left: -20px;
width: 120%;
height: 425px;
}
.img_cat {
/* 定位之后 就离开了文档
document.body 流(从上到下block, 从左到右 inline inline-block)
*/
position: absolute;
/* 层次 */
z-index: 7;
}
.img_text {
position: absolute;
z-index: 8;
}
</style>终于进入js了
代码中用了一个var imgData = {}JSO对象来将图片参数配置好
还在鼠标移动监听事件的方法中将picMove()外部引用
其他的就是一些算法步骤 类似于鼠标移动的点所对应的比例是多少 而图片应该移动多少之 类的。
<script>
window.onload = function() {
var elePic = document.querySelector('#pictures');
var window_width = document.body.clientWidth;
var window_height = document.body.clientHeight;//窗口的宽和高
var field = document.getElementById('field');
var field_width = field.offsetWidth;
var field_height = field.offsetHeight; // offsetLeft offsetTop 偏移量 相对父元素的编移
var rate_w = field_width/window_width;
var rate_h = field_height/window_height;//偏移量和窗口宽高的比例 下面会用于计算鼠标移动时 图片应该移动多少
var imgData = {//利用JSON来将每张图片的参数(对应的位置 透明度)设置好
bg: {
left: -780,
top: -200,
scale: 0.06,
isFont: false
},
text: {
left: -500,
top: -120,
scale: 0.03,
isFont: true
},
cat : { left: -200, top: -100 ,scale: 0.02, isFont: true },
cat_shadow : { left: -189, top: 100 ,scale: 0.02, isFont: true },
speeder : { left: -70, top: -40 ,scale: 0.01, isFont: true },
speeder_shadow : { left: -70, top: 75 ,scale: 0.01, isFont: true },
building_1 : { left: 20, top: -111 ,scale: 0.03, isFont: false },
building_2 : { left: 300, top: -60 ,scale: 0.05, isFont: false },
}
for (key in imgData) {// 遍历 json object 遍历 key=> value
var oImg = // .img_+key
document.querySelector('.img_' + key);
var offset_w =
field_width/2*imgData[key].scale;
var offset_h =
field_height/2*imgData[key].scale;
//将图片放到对应的位置上
oImg.style.left =
field_width/2 + offset_w
+ imgData[key].left + "px";
oImg.style.top =
field_height/2 + offset_h
+ imgData[key].top + "px";
}
//鼠标移动事件监听
document.body.onmousemove = function(e) {//将方法拆分 调用外部
picMove(e.pageX,e.pageY);
}
picMove = function(pageX,pageY) {
for(key in imgData) {
var field = document.getElementById('field');
var oImg = document.querySelector(".img_" + key);//
var field_width = field.offsetWidth;
var field_height = field.offsetHeight;
var offer_w = rate_w * pageX * imgData[key].scale;
var offer_h = rate_h * pageY * imgData[key].scale;
oImg.style.left =
field_width/2 - offer_w + imgData[key].left + 'px';
oImg.style.top =
field_height/2 - offer_h + imgData[key].top + 'px';
}
}
elePic.style.opacity = 1;//透明度为1 图片显示出来
}
</script>按照上面这样的代码就已经可以执行了。
but
我们会发现即使代码中有许多注释，有时候还是很难理解。那么有没有一种方式去处理这些乱乱的代码呢
答案肯定是yes喽，大家可以想一下，我们上面的这段js代码中是怎么处理那么多的图片的参数的
我们会发现它将所有的图片参数都写进了
imgdate这个json对象中,那么，我们是不是可以将这所有的代码都写进一个叫做github404的json对象中呢
咳咳，划重点了(敲黑板)
怎么做到将代码都放进
github404中呢如下面的代码这样
PS:方法中的局部变量的定义我只定义了elePic,rate_w,那么几个，感兴趣的同学可以自己改一下。还有事件监听函数
attachMouseMoveEvent里的var that = this;，其实不太明白怎么用，就先这样写吧。扫描二维码关注公众号，回复： 8619354 查看本文章
<script>
// 组织代码 命名空间
var github404 = {//定义github404 对象
imgData: {//json的用法 内部又可以这么做
bg: {
left: -780,
top: -200,
scale: 0.06,
isFont: false,
},
text: {
left: -500,
top: -120,
scale: 0.03,
isFont: true,
},
cat : { left: -200, top: -100 ,scale: 0.02, isFont: true },
cat_shadow : { left: -189, top: 100 ,scale: 0.02, isFont: true },
speeder : { left: -70, top: -40 ,scale: 0.01, isFont: true },
speeder_shadow : { left: -70, top: 75 ,scale: 0.01, isFont: true },
building_1 : { left: 20, top: -111 ,scale: 0.03, isFont: false },
building_2 : { left: 300, top: -60 ,scale: 0.05, isFont: false },
},
//这里将方法中要用的变量变为内部参数 使用时直接this. 调用 不用多次定义局部变量
elePic: document.querySelector('#pictures'),
rate_w: 0,
rate_h: 0,
field: document.getElementById('field'),//背景
init: function() {//初始化的方法 整个对象与外部的接口
//这三个方法都变为内部的了 在下面定义
this.setRateWH();//计算出比例
this.placeImg();//将图片放上网页
this.attachMouseMoveEvent();//监听事件
},
setRateWH: function() {
var window_width = document.body.clientWidth;
var window_height = document.body.clientHeight;
// console.log(window_width,window_height);
var field_width = field.offsetWidth;
var field_height = field.offsetHeight;//高度和宽度
// offsetLeft offsetTop 偏移量 相对于父元素的偏移
// 配置 JSON 对象字面量
// console.log(field_width,field_height);
this.rate_w = field_width/window_width;
this.rate_h = field_height/window_height;
// console.log(this.rate_w,this.rate_h);//倍数
},
placeImg: function() {
for(key in this.imgData) {
var field_width = field.offsetWidth;
var field_height = field.offsetHeight;
var oImg = document.querySelector(".img_" + key);
var offset_w = field_width/2*this.imgData[key].scale;
var offset_h = field_height/2*this.imgData[key].scale;//需要偏移的宽和高
oImg.style.left =
field_width/2 + offset_w +this.imgData[key].left + "px";
oImg.style.top =
field_height/2 + offset_h +this.imgData[key].top + "px";
}
this.elePic.style.opacity = 1;
//加载完后 透明度设为1 显示图片
},
attachMouseMoveEvent: function() {
var that = this;//that 是this 的一个副本? 这个不太清楚 请大神指点
document.body.onmousemove = function(e) {
that.picMove(e.pageX,e.pageY);
}
},
picMove: function(pageX,pageY) {
for(key in this.imgData) {
// 局部变量
var oImg = document.querySelector(".img_" + key);
var field_width = field.offsetWidth;
var field_height = field.offsetHeight;
var offer_w = this.rate_w * pageX * this.imgData[key].scale;
var offer_h = this.rate_h * pageY * this.imgData[key].scale;
// console.log(this.rate_w,this.rate_h);
oImg.style.left =
field_width/2 - offer_w + this.imgData[key].left + 'px';
oImg.style.top =
field_height/2 - offer_h + this.imgData[key].top + 'px';
}
},
}
window.onload = function () {
github404.init();
}
</script>到这里，我们就已经利用 json 对象将方法和数据都进行了处理和包装,在页面载入时只会通过
github404.init();来加载，同时也增加了代码的可读性第一次写文章，也是初入门，然后如果文章排版啊，代码啊，我的理解啊之类的有错的，还希望大佬吗能多多批评。谢谢谢谢~~~
源文件