前端项目-尚优选【HTML/CSS/JS技术综合实战】

项目简介

登录注册布局搭建

列表布局搭建

logo以及搜索框

商品分类导航布局

路径导航布局

路径导航数据动态渲染

左侧放大镜布局搭建

放大镜鼠标移入移出效果

放大镜鼠标移动实现蒙版元素的拖拽效果

蒙版元素移动的边界控制

放大镜移动实现大图元素等比例移动效果

放大镜缩略图布局搭建效果

放大镜缩略图数据动态渲染

点击缩略图实现换小图以及大图效果

实现缩略图点击左右箭头的图片轮播效果原理分析

计算每一次图片移动的距离以及ul移动的距离

右侧商品上半部分详情介绍的布局搭建

右侧商品上半部分详解介绍数据动态渲染

右侧商品下半部分商品参数布局搭建

右侧商品下半部分商品参数数据动态渲染

点击第一行商品参数的文字颜色排他效果

利用闭包函数来解决循环中事件里面的变量问题

实现选择结果的布局搭建

点击商品参数实现对应结果的动态添加

点击删除按钮实现删除对应参数数据

封装价格变动函数

购物车以及购买价格的布局搭建

中间左侧选项卡整体结构布局搭建

中间左侧选项卡具体内容布局搭建

中间右侧选择搭配的整体结构布局搭建

选择搭配中复选框选中状态的套餐价联动效果

中间右侧选项卡布局搭建

封装一个公共的选项卡函数并调用

右侧导航栏的上班部分搭建

右侧导航栏的中间布局搭建

右侧导航栏的点击切换状态实现