pc端項目總結

這個星期做了一個簡單的PC項目,在這個項目也遇到很多的問題,考察了對css3的動畫,canvas,還有對js掌握程度,自己也對此進行一些的總結

一 項目骨架

對HTML5新增的語義化標籤進行應用,

	<header></header>
	<nav></nav>
	<section></section>
	<footer></footer>

HTML5可以讓很多更語義化結構化的代碼標籤代替大量的無意義的div標籤
這種語義化的特性提升了網頁的質量和語義
流體佈局
網頁縮小和放大時網頁佈局會隨着瀏覽器的大小而改變
固定佈局
固定寬度佈局的設計不會因爲用戶擴大或縮小瀏覽器窗口而發生變化

佈局思路:首先分爲頭部和內容區,頭部的話又分爲logo,導航欄,和下標箭頭,
內容區:因爲涉及到滑屏,所以一個ul容器包含五個li來佈局,對裏進行定位,
然後對每一屏分別進行設置,

二 項目內容設計

第一屏

這屏是一個3d的輪播,

手動輪播(事件驅動)
小圓點的切換
class不能完全覆蓋,classlist的形式A區操作它
for循環內部添加事件
將所有小圓點的active remove掉
給當前觸發點擊事件的小圓點add active(this)
判斷方向(在最外層循環時,將i綁給每個小圓點的index屬性;點擊事件邏輯的最後將this.index賦給oldindex)
從左往右(this.index > oldindex)
對動畫的切換
從右向左(this.index < oldindex)
對動畫的切換

自動輪播(定時器驅動)
函數包裹循環定時器(方便重新開啓);在函數的第一行清除定時器
自動輪播只有一個方向;無縫
this.index替換成一個會自動加1的變量 autoindex;邏輯的最後將autoindex賦給oldindex
無縫的實現就是一個if判斷,判斷 autoindex的取值範圍
從左往右(this.index > oldindex)
對動畫的切換

第二屏
這一屏主要是對css3的transform的運用,需要搭建一個3d舞臺,
搞清文字的那一面的正面,背景圖的是反面

第二屏
用animation動畫來達到效果,

@keyframes works3Move{
            0%{
                transform: translateX(0px) rotateY(0deg);
            }
            49%{
                transform: translateX(-490px) rotateY(0deg);
            }
            50%{
                transform: translateX(-500px) rotateY(180deg);
            }
            100%{
                transform: translateX(0px) rotateY(180deg);
            }
        }

第四屏
這一屏考察圖片的定位,實現圖片的炸裂效果

第五屏
canvas的運用
事件的綁定和同步代碼與異步代碼的執行
JavaScript是一門單線程的語言,單線程意味着,如果在同個時間有多個任務的話,這些任務就需要進行排隊,前一個任務執行完,纔會執行下一個任務
網站的渲染過程,比如元素的渲染,其實就是一個同步任務

異步任務是指不進入主線程,而進入任務隊列的任務,只有任務隊列通知主線程,某個異步任務可以執行了,該任務纔會進入主線程,當我們打開網站時,像圖片的加載,音樂的加載,其實就是一個異步任務

最後這個項目有一個開機動畫,原理就是在最外層放一個遮罩層,進度條隨數據加載變化,當數據加載完成時,將遮罩層清除掉,如果不清除,會影響html結構
會造成影響

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章