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

專案簡介

登入註冊佈局搭建

清單佈局搭建

logo以及搜尋框

商品分類導航佈局

路徑導航佈局

路徑導航資料動態渲染

左側放大鏡佈局搭建

放大鏡滑鼠移入移出效果

放大鏡滑鼠移動實現蒙版元素的拖曳效果

蒙版元素移動的邊界控制

放大鏡移動實現大圖元素等比例移動效果

放大鏡縮圖版面搭建效果

放大鏡縮圖資料動態渲染

點擊縮圖實現換小圖以及大圖效果

實現縮圖點擊左右箭頭的圖片輪播效果原理分析

計算每張圖片移動的距離以及ul移動的距離

右側商品上半部詳情介紹的佈局搭建

右側商品上半部詳解介紹資料動態渲染

右側商品下半部商品參數佈局搭建

右側商品下半部商品參數資料動態渲染

點選第一行商品參數的文字顏色排他效果

利用閉包函數來解決循環中事件裡面的變數問題

實現選擇結果的版面搭建

點擊商品參數實現對應結果的動態添加

點選刪除按鈕實現刪除對應參數數據

封裝價格變動函數

購物車以及購買價格的版面搭建

中間左側選項卡整體結構佈局搭建

中間左側選項卡具體內容佈局搭建

中間右側選擇搭配的整體結構佈局搭建

選擇搭配中複選框選取狀態的套餐價連動效果

中間右側選項卡佈局搭建

封裝一個公共的選項卡函數並調用

右側導覽列的上班部分搭建

右側導覽列的中間版面搭建

右側導覽列的點擊切換狀態實現