前端專案-尚優選【HTML/CSS/JS技術綜合實戰】

• 第1章 頁面佈局
• 1-1 專案簡介
• 1-2 登入註冊佈局搭建
• 1-3 清單佈局搭建
• 1-4 logo以及搜尋框
• 1-5 商品分類導航佈局
• 1-6 路徑導航佈局
• 1-7 路徑導航資料動態渲染
• 第2章 放大鏡效果
• 2-1 左側放大鏡佈局搭建
• 2-2 放大鏡滑鼠移入移出效果
• 2-3 放大鏡滑鼠移動實現蒙版元素的拖曳效果
• 2-4 蒙版元素移動的邊界控制
• 2-5 放大鏡移動實現大圖元素等比例移動效果
• 2-6 放大鏡縮圖版面搭建效果
• 2-7 放大鏡縮圖資料動態渲染
• 2-8 點擊縮圖實現換小圖以及大圖效果
• 2-9 實現縮圖點擊左右箭頭的圖片輪播效果原理分析
• 2-10 計算每張圖片移動的距離以及ul移動的距離
• 第3章 右側商品
• 3-1 右側商品上半部詳情介紹的佈局搭建
• 3-2 右側商品上半部詳解介紹資料動態渲染
• 3-3 右側商品下半部商品參數佈局搭建
• 3-4 右側商品下半部商品參數資料動態渲染
• 第4章 商品參數
• 4-1 點選第一行商品參數的文字顏色排他效果
• 4-2 利用閉包函數來解決循環中事件裡面的變數問題
• 4-3 實現選擇結果的版面搭建
• 4-4 點擊商品參數實現對應結果的動態添加
• 4-5 點選刪除按鈕實現刪除對應參數數據
• 4-6 封裝價格變動函數
• 第5章 中間左側選項卡
• 5-1 購物車以及購買價格的版面搭建
• 5-2 中間左側選項卡整體結構佈局搭建
• 5-3 中間左側選項卡具體內容佈局搭建
• 第6章 中間右側選項卡
• 6-1 中間右側選擇搭配的整體結構佈局搭建
• 6-2 選擇搭配中複選框選取狀態的套餐價連動效果
• 6-3 中間右側選項卡佈局搭建
• 第7章 右側導覽列
• 7-1 封裝一個公共的選項卡函數並調用
• 7-2 右側導覽列的上班部分搭建
• 7-3 右側導覽列的中間版面搭建
• 7-4 右側導覽列的點擊切換狀態實現