??????? 各位觀眾老爺大家好,歡迎收看內(nèi)褲總動(dòng)員的項(xiàng)目總結(jié),今天給大家說(shuō)一下我所做過(guò)的項(xiàng)目的一些項(xiàng)目經(jīng)驗(yàn)和總結(jié). 比較lou, 輕點(diǎn)噴啊~~~,好啦,廢話不多說(shuō)了,現(xiàn)在就開(kāi)始我的項(xiàng)目分享吧.
項(xiàng)目名稱 :? 烏合之眾
項(xiàng)目介紹:
????? 此項(xiàng)目為一個(gè)手游的游戲官方網(wǎng)站,他的頁(yè)面主要分為以下幾個(gè)內(nèi)容頁(yè)面:
首頁(yè),官方首頁(yè),新聞報(bào)告,游戲特色,影音專區(qū),新手指南,玩家社區(qū).這幾個(gè)頁(yè)面.
項(xiàng)目特點(diǎn):
??????????? 此項(xiàng)目中特點(diǎn): 頁(yè)面中動(dòng)畫(huà)效果.
???????????????????????????????? 頁(yè)面鼠標(biāo)觸摸效果.
???????????????????????????????? 大屏幕切換的層次感.
????????????????????????????????? 內(nèi)容模塊的連接性.
???????????? 具體有哪些的獨(dú)特的特點(diǎn),稍后將為大家進(jìn)行圖片展示吧
技術(shù)點(diǎn)
相信大家對(duì)這個(gè)是最期待的,也是最關(guān)注的地方. 那么這么一個(gè)大的網(wǎng)站他到底都用到了哪些技術(shù)點(diǎn)呢.首先明確的可以告訴大家,沒(méi)有想象中的那么多的技術(shù)點(diǎn).但是卻對(duì)你的基礎(chǔ)知識(shí)是否牢固,頁(yè)面搭建的經(jīng)驗(yàn)要求較高.所以,做游戲網(wǎng)頁(yè)的小伙伴們,基礎(chǔ)知識(shí)不牢固的可以默默的看看自己的胸了~~~~~恩哼.....??? 先給大家列出以下此項(xiàng)目中的一些技術(shù)點(diǎn)吧.
(1) .?? 頁(yè)面架構(gòu)???? 主要頁(yè)面架構(gòu)我基本都是采用雙層div進(jìn)行構(gòu)建. 并用絕對(duì)定位進(jìn)行定位.方便我內(nèi)容上的模塊定位.
(2).?? background-position: center center? 相信這個(gè)大家或許比較熟悉,但是剛開(kāi)始的時(shí)候本寶寶確實(shí)被這個(gè)所坑到了.大家可以想象一下這個(gè)效果是如何出來(lái)的.圖片不變形的情況下大小百分比正常顯示.這個(gè)效果如果想不到,那就是真的想不到了. 阿彌陀佛(偶沒(méi)頭發(fā)).
(3) 動(dòng)畫(huà)移動(dòng)效果?? animation? webkit? moz? os? 四種兼容動(dòng)畫(huà)
這個(gè)是首頁(yè)的一些效果的地方,大家可以看一下這里需要用到了多少的animation的動(dòng)畫(huà)效果.并且關(guān)聯(lián)到一起的.
(4) 大屏幕切換? switer 插件? 和 transform: scale 元素變大
(5) hover 的動(dòng)畫(huà)顏色效果
(5) 事件冒泡? overflow-x: hidden; 這個(gè)是X軸的滾動(dòng)條隱藏
技術(shù)難點(diǎn)
(1)首頁(yè) 動(dòng)畫(huà)關(guān)聯(lián)
在這里大家可以想想看,從首頁(yè)中左右兩個(gè)按鈕的動(dòng)畫(huà). 需要有層次的出現(xiàn). 中間的元素的左右運(yùn)行. 右面的圖標(biāo)轉(zhuǎn)動(dòng). 需要到字體庫(kù)下載字體進(jìn)行轉(zhuǎn)動(dòng). 而且下面的輸入信息的動(dòng)畫(huà). 你們可以考慮一下此頁(yè)面你們需要多長(zhǎng)時(shí)間才能寫(xiě)出來(lái).
(2) 游戲特色? 此網(wǎng)站動(dòng)畫(huà)功能最多的地方也是最麻煩的地方.
這里還只是剛開(kāi)始. 其中涉及的技術(shù)點(diǎn),? 預(yù)加載圖片.? 預(yù)加載動(dòng)畫(huà),? 預(yù)加載百分比進(jìn)度.? 加載完成視頻. 跳過(guò)進(jìn)入游戲特色頁(yè)面.
采用 onload進(jìn)行預(yù)加載. JS聲明變量制作預(yù)加載百分比, 圖片切換制作預(yù)加載動(dòng)畫(huà). 加載完成播放video視頻.
(3) 游戲特色中有4大模塊和預(yù)約激活碼功能.? 此4大模塊由左右兩個(gè)按鈕點(diǎn)擊切換. 也可直接點(diǎn)擊進(jìn)入. 首先先看第一個(gè)功能?? "感受極致".
此功能為純手寫(xiě)代碼,無(wú)用任何插件. 在這里個(gè)人說(shuō)明為何不用switer插件呢?? 因?yàn)檫@個(gè)大屏幕的這兩個(gè)左右的按鈕.因?yàn)榇藗z按鈕不只是可以切換當(dāng)前5個(gè)圖片. 當(dāng)圖片達(dá)到最后一個(gè)或者最前一個(gè)圖片的時(shí)候在進(jìn)行切換, 就會(huì)變成4大模塊的切換.而switer插件進(jìn)行嵌套的時(shí)候他的左右按鈕是無(wú)法做到雙層使用的.所以在這里個(gè)人是用純手寫(xiě)代碼進(jìn)行編輯的,而且也發(fā)現(xiàn)純手寫(xiě)代碼要比插件還方便的多...因?yàn)槔锩娴穆暶髯兞慷际怯赡阕约簛?lái)控制的.
技術(shù)說(shuō)明:? 在這里呢,個(gè)人是用 position: absolute; 對(duì)當(dāng)前5個(gè)圖片進(jìn)行定位, 并且設(shè)置 z-index層級(jí). 在JS中我聲明一個(gè)變量n 來(lái)進(jìn)行左右按鈕點(diǎn)擊事件的判斷來(lái)進(jìn)行n++ 或者n--, 這樣我就能夠控制我的圖片切換到最前面或者最后面的圖片時(shí)進(jìn)行模塊切換. 而這里的圖片移動(dòng)采用 transform: translateX();移動(dòng)他們的X軸.在這里移動(dòng)的是5張圖片,直接判斷誰(shuí)的transform: translateX();在最前面或者最后面即可. 這樣就可以直接設(shè)置他的起點(diǎn)位置了.剩下的2 3 4 的圖 依次順序切換固定位置即可. 而且小伙伴們,注意上面四大模塊點(diǎn)擊時(shí) 和鼠標(biāo)略過(guò)時(shí)的hover 動(dòng)畫(huà)哦.
(4) 第二個(gè)模塊 天生卓越.
在這里有四個(gè)區(qū)域,四個(gè)圖片輪流的進(jìn)行圖片動(dòng)畫(huà), 點(diǎn)擊后出現(xiàn)需要播放的視頻. 在這里你需要注意的是左右按鈕進(jìn)行點(diǎn)擊的模塊切換關(guān)聯(lián).
(5) 見(jiàn)證榮耀
在這里又是一個(gè)tab切換. 在這里個(gè)人還是純手寫(xiě)的并沒(méi)有用switer插件.? 主要功能是點(diǎn)擊這里的任意圖片區(qū)域后將顯示出tab切換,并顯示對(duì)應(yīng)的圖片.
技術(shù)說(shuō)明: 在每個(gè)圖片區(qū)域中for循環(huán)制作點(diǎn)擊事件. 點(diǎn)擊后tab切換 display:block; 在這些圖片中JQ獲取的a標(biāo)簽元素為一個(gè)a標(biāo)簽數(shù)組. 取到對(duì)應(yīng)的下標(biāo)值 ,就將顯示出當(dāng)前坐標(biāo)值所對(duì)應(yīng)的圖片即可.
(6)邂逅偉大? 最麻煩的動(dòng)畫(huà)切換效果.
這里總共有6個(gè)圖片,每個(gè)圖片的切換方式都不一樣.有從右向左,有雙層左右出現(xiàn),有4層上下左右出現(xiàn).的,而且點(diǎn)擊每個(gè)圖片按鈕時(shí),按鈕將變大.點(diǎn)擊最后一個(gè)按鈕6時(shí). 點(diǎn)擊導(dǎo)航欄將縮小到最后成為一個(gè)按鈕6.
技術(shù)說(shuō)明:圖片上的切換我采用的是 transform: translate();的方式進(jìn)行動(dòng)畫(huà)移動(dòng). 6個(gè)圖片我分別放的6個(gè)div進(jìn)行最初的display:none; 然后由第一個(gè)開(kāi)始進(jìn)行animation動(dòng)畫(huà)效果移動(dòng).點(diǎn)擊到哪個(gè)按鈕 我將獲取當(dāng)前按鈕的坐標(biāo)和對(duì)應(yīng)的div進(jìn)行當(dāng)前div的退回動(dòng)畫(huà),完成當(dāng)前div退回動(dòng)畫(huà)后display:none, 在把點(diǎn)擊按鈕所對(duì)應(yīng)的div進(jìn)行display:block; 然后動(dòng)畫(huà)在進(jìn)行移動(dòng)出現(xiàn).
在這里和大家說(shuō)明一下: 按鈕的動(dòng)畫(huà)和背景圖片切換的動(dòng)畫(huà)所用的是不一樣的,? 按鈕動(dòng)畫(huà)我用的transition補(bǔ)間動(dòng)畫(huà), 而背景圖片切換我用的animation動(dòng)畫(huà). 為何我的按鈕會(huì)用到這個(gè)transition呢? 這就要明白 transition和 animation之間的區(qū)別了,他們的功能都一樣,都是動(dòng)畫(huà),而他們之間的區(qū)別在于,transition動(dòng)畫(huà)他是補(bǔ)間動(dòng)畫(huà),而animation動(dòng)畫(huà)是假動(dòng)畫(huà).? 這個(gè)也是我按到第6個(gè)按鈕的時(shí)候,按鈕導(dǎo)航欄全部縮放回去的原因.
補(bǔ)間動(dòng)畫(huà): 補(bǔ)間動(dòng)畫(huà)的特點(diǎn)是他不止可以控制元素的上下左右的移動(dòng)位置,他也可以控制自己的元素大小,自己的寬高也是可以直接控制的.舉個(gè)"栗子"來(lái)說(shuō), 我把width:100px 用transtion動(dòng)畫(huà)更改為 width:50px? 他是會(huì)以動(dòng)畫(huà)的方式一點(diǎn)點(diǎn)變成50px的.而 animation他則是不會(huì)的,他會(huì)瞬閃過(guò)去.
假動(dòng)畫(huà): 假動(dòng)畫(huà),他能夠移動(dòng)位置,大小等. 但是他不能直接控制當(dāng)前元素的 寬和高, 如果控制,他會(huì)直接瞬閃,是沒(méi)有動(dòng)畫(huà)的, 而且animation他執(zhí)行完當(dāng)前的動(dòng)畫(huà)后他是不會(huì)保存的. 他會(huì)回到你在css寫(xiě)的初始位置. 如果不在animation里不設(shè)定 你當(dāng)前的動(dòng)畫(huà)位置或者移動(dòng)位置,他會(huì)回到你初始的位置. 當(dāng)然animation也有一個(gè)屬性可以控制他的動(dòng)畫(huà)執(zhí)行完成后將停止在最后一刻. 但是他的動(dòng)畫(huà)還是假動(dòng)畫(huà). 無(wú)法控制寬高的.
? 好啦,此項(xiàng)目的技術(shù)分享就先介紹這些啦. 其中有些地方或者你們會(huì)有更好的辦法,感謝大家的閱讀和評(píng)論,內(nèi)褲會(huì)吸取更好的經(jīng)驗(yàn)并壯大自己的經(jīng)驗(yàn),爭(zhēng)取以后的撕逼技術(shù)更高一層.~~~~ 謝謝大家.
