利用js完成github404的頁面效果圖

huhud 發布于2019-08-29 13:46 / 3359人閱讀

摘要：利用完成的動態效果最近學習了的頁面效果，有一些心得想要記錄下來。

利用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

GPU云服務器云服務器 github404 js折疊頁面效果圖 js折疊頁面效果 js跳轉頁面動畫效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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，本著瞎...

pumpkin9 2019-08-29 13:48 評論0 收藏0