利用js完成github404的页面效果图

huhud 发布于2019-08-29 13:46 / 3248人阅读

摘要：利用完成的动态效果最近学习了的页面效果，有一些心得想要记录下来。

利用js完成github404的动态效果

最近学习了github not found 的页面效果，有一些心得想要记录下来。
第一次写文章，若有不对的地方，还请大佬们指出。

效果图

我是利用往上下载的一个软件来制作这个gif的，不知道为什么图片有点花了

实验准备

所需的图片资源和源码会在文章底部给出。

开始代码

先来看网页的 body 部分
将所有img 的类名都以 img_ 开头在之后的js 中对这些图片操作时就能更方便的通过图片名获得对应的元素，而且这样看上去也更舒服


    
        //最大的背景图片
            
        
        
            //这里将所有的class的名字都以 img_ 开头

再看一下style
wrapper 为网页中最大的一个容器 field 和 pictures 都在其中
这里对 wrapper 有一个相对网页 body 的定位
之后的图片都对 wrapper 绝对定位
这里只写了.img_cat 和 .img_text 之后的都一样只是 z-index 来显示出层次感

终于进入js了
代码中用了一个 var imgData = {} JSO对象来将图片参数配置好
还在鼠标移动监听事件的方法中将 picMove() 外部引用
其他的就是一些算法步骤类似于鼠标移动的点所对应的比例是多少而图片应该移动多少之类的。

按照上面这样的代码就已经可以执行了。

but

我们会发现即使代码中有许多注释，有时候还是很难理解。那么有没有一种方式去处理这些乱乱的代码呢

答案肯定是yes喽，大家可以想一下，我们上面的这段js代码中是怎么处理那么多的图片的参数的

我们会发现它将所有的图片参数都写进了imgdate这个json对象中,那么，我们是不是可以将这所有的代码都写进一个叫做github404的json对象中呢

咳咳，划重点了(敲黑板)

怎么做到将代码都放进github404中呢

如下面的代码这样

PS:方法中的局部变量的定义我只定义了elePic,rate_w,那么几个，感兴趣的同学可以自己改一下。还有事件监听函数attachMouseMoveEvent里的var that = this;，其实不太明白怎么用，就先这样写吧。

到这里，我们就已经利用 json 对象将方法和数据都进行了处理和包装,在页面载入时只会通过github404.init();来加载，同时也增加了代码的可读性

第一次写文章，也是初入门，然后如果文章排版啊，代码啊，我的理解啊之类的有错的，还希望大佬吗能多多批评。谢谢谢谢~~~

源文件

github404

专线服务云服务器 github404 js折叠页面效果图 js折叠页面效果 js跳转页面动画效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112698.html

利用js完成github404的页面效果图

摘要：利用完成的动态效果最近学习了的页面效果，有一些心得想要记录下来。利用js完成github404的动态效果最近学习了github not found 的页面效果，有一些心得想要记录下来。第一次写文章，若有不对的地方，还请大佬们指出。效果图我是利用往上下载的一个软件来制作这个gif的，不知道为什么图片有点花了 showImg(https://segmentfault.com/i...

zhonghanwen 2019-08-21 17:32 评论0 收藏0
利用js完成github404的页面效果图

摘要：利用完成的动态效果最近学习了的页面效果，有一些心得想要记录下来。利用js完成github404的动态效果最近学习了github not found 的页面效果，有一些心得想要记录下来。第一次写文章，若有不对的地方，还请大佬们指出。效果图我是利用往上下载的一个软件来制作这个gif的，不知道为什么图片有点花了 showImg(https://segmentfault.com/i...

Meathill 2019-08-01 17:57 评论0 收藏0
canvas 实现 github404动态效果

摘要：使用来完成的动态效果前几天使用样式和致敬了一下的类似界面，同时最近又接触了，本着瞎折腾的想法便借着之前的的算法，使用来完成了的动态效果。效果图文件目录文件资源文件源码与图片在文章末尾给出代码网页的部分这里给定义好宽和高设为块级元素。使用canvas来完成github404的动态效果前几天使用css样式和js致敬了一下github404的类似界面，同时最近又接触了canvas，本着瞎...

impig33 2019-08-21 17:35 评论0 收藏0
canvas 实现 github404动态效果

摘要：使用来完成的动态效果前几天使用样式和致敬了一下的类似界面，同时最近又接触了，本着瞎折腾的想法便借着之前的的算法，使用来完成了的动态效果。效果图文件目录文件资源文件源码与图片在文章末尾给出代码网页的部分这里给定义好宽和高设为块级元素。使用canvas来完成github404的动态效果前几天使用css样式和js致敬了一下github404的类似界面，同时最近又接触了canvas，本着瞎...

RobinTang 2019-08-05 17:58 评论0 收藏0
canvas 实现 github404动态效果

摘要：使用来完成的动态效果前几天使用样式和致敬了一下的类似界面，同时最近又接触了，本着瞎折腾的想法便借着之前的的算法，使用来完成了的动态效果。效果图文件目录文件资源文件源码与图片在文章末尾给出代码网页的部分这里给定义好宽和高设为块级元素。使用canvas来完成github404的动态效果前几天使用css样式和js致敬了一下github404的类似界面，同时最近又接触了canvas，本着瞎...

pumpkin9 2019-08-29 13:48 评论0 收藏0