資訊專欄INFORMATION COLUMN
摘要：利用完成的動態(tài)效果最近學習了的頁面效果，有一些心得想要記錄下來。
利用js完成github404的動態(tài)效果
最近學習了github not found 的頁面效果，有一些心得想要記錄下來。 第一次寫文章，若有不對的地方，還請大佬們指出。效果圖
我是利用往上下載的一個軟件來制作這個gif的，不知道為什么圖片有點花了實驗準備
所需的圖片資源和源碼會在文章底部給出。開始代碼
先來看網(wǎng)頁的 body 部分
將所有img 的類名 都以 img_ 開頭 在之后的js 中對這些圖片操作時就能更方便的通過圖片名獲得對應的元素，而且這樣看上去也更舒服
//最大的背景圖片
//這里將所有的class的名字都以 img_ 開頭
再看一下style
wrapper 為網(wǎng)頁中最大的一個容器 field 和 pictures 都在其中
這里對 wrapper 有一個相對網(wǎng)頁 body 的定位
之后的圖片都對 wrapper 絕對定位
這里只寫了.img_cat 和 .img_text 之后的都一樣 只是 z-index 來顯示出層次感
終于進入js了
代碼中用了一個 var imgData = {} JSO對象來將圖片參數(shù)配置好
還在鼠標移動監(jiān)聽事件的方法中將 picMove() 外部引用
其他的就是一些算法步驟 類似于鼠標移動的點所對應的比例是多少 而圖片應該移動多少之 類的。
按照上面這樣的代碼就已經(jīng)可以執(zhí)行了。but
我們會發(fā)現(xiàn)即使代碼中有許多注釋，有時候還是很難理解。那么有沒有一種方式去處理這些亂亂的代碼呢
答案肯定是yes嘍，大家可以想一下，我們上面的這段js代碼中是怎么處理那么多的圖片的參數(shù)的
我們會發(fā)現(xiàn)它將所有的圖片參數(shù)都寫進了imgdate這個json對象中,那么，我們是不是可以將這所有的代碼都寫進一個叫做github404的json對象中呢
咳咳，劃重點了(敲黑板)怎么做到將代碼都放進github404中呢
如下面的代碼這樣
PS:方法中的局部變量的定義我只定義了elePic,rate_w,那么幾個，感興趣的同學可以自己改一下。還有事件監(jiān)聽函數(shù)attachMouseMoveEvent里的var that = this;，其實不太明白怎么用，就先這樣寫吧。
到這里，我們就已經(jīng)利用 json 對象將方法和數(shù)據(jù)都進行了處理和包裝,在頁面載入時只會通過github404.init();來加載，同時也增加了代碼的可讀性
第一次寫文章，也是初入門，然后如果文章排版啊，代碼啊，我的理解啊之類的有錯的，還希望大佬嗎能多多批評。謝謝謝謝~~~
源文件
github404文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/112698.html
摘要：利用完成的動態(tài)效果最近學習了的頁面效果，有一些心得想要記錄下來。 利用js完成github404的動態(tài)效果 最近學習了github not found 的頁面效果，有一些心得想要記錄下來。 第一次寫文章，若有不對的地方，還請大佬們指出。 效果圖 我是利用往上下載的一個軟件來制作這個gif的，不知道為什么圖片有點花了 showImg(https://segmentfault.com/i...
摘要：利用完成的動態(tài)效果最近學習了的頁面效果，有一些心得想要記錄下來。 利用js完成github404的動態(tài)效果 最近學習了github not found 的頁面效果，有一些心得想要記錄下來。 第一次寫文章，若有不對的地方，還請大佬們指出。 效果圖 我是利用往上下載的一個軟件來制作這個gif的，不知道為什么圖片有點花了 showImg(https://segmentfault.com/i...
摘要：使用來完成的動態(tài)效果前幾天使用樣式和致敬了一下的類似界面，同時最近又接觸了，本著瞎折騰的想法便借著之前的的算法，使用來完成了的動態(tài)效果。效果圖文件目錄文件資源文件源碼與圖片在文章末尾給出代碼網(wǎng)頁的部分這里給定義好寬和高設為塊級元素。 使用canvas來完成github404的動態(tài)效果 前幾天使用css樣式和js致敬了一下github404的類似界面，同時最近又接觸了canvas，本著瞎...
摘要：使用來完成的動態(tài)效果前幾天使用樣式和致敬了一下的類似界面，同時最近又接觸了，本著瞎折騰的想法便借著之前的的算法，使用來完成了的動態(tài)效果。效果圖文件目錄文件資源文件源碼與圖片在文章末尾給出代碼網(wǎng)頁的部分這里給定義好寬和高設為塊級元素。 使用canvas來完成github404的動態(tài)效果 前幾天使用css樣式和js致敬了一下github404的類似界面，同時最近又接觸了canvas，本著瞎...
閱讀 2240·2021-11-22 13:52
閱讀 3888·2021-11-10 11:36
閱讀 1427·2021-09-24 09:47
閱讀 1100·2019-08-29 13:54
閱讀 3373·2019-08-29 13:46
閱讀 1954·2019-08-29 12:16
閱讀 2121·2019-08-26 13:26
閱讀 3479·2019-08-23 17:10
