尚优选
视频介绍
尚优选是一款HTML、CSS、JavaScript技术综合应用的商城项目，适合初学前端的小伙伴夯实基础，积累项目经验。项目具有很强的实用性，既是对前端基础知识的梳理和整合，同时为后续更多主流技术提供了实际应用的练兵场。
项目技术栈包含：定义HTML页面结构、CSS样式的属性定义，Less中混合器的创建和使用规则、嵌套语法、父级引用等，以及JavaScript中的循环、分支、函数、DOM、BOM、数组、对象等。
项目整体功能的重难点体现在：商品放大镜的功能实现，缩略图的轮播，商品参数数据的动态渲染，以及点击之后的选择结果显示和商品价格的变动效果，公共函数选项卡的创建及灵活调用，网站固定的右侧侧边栏布局和效果等。业务场景贴近实际，技术应用紧跟潮流，完全按照市场需求开发。
视频目录 选集
- 01.尚硅谷_尚优选-项目简介
- 02.尚硅谷_尚优选-登录注册布局搭建
- 03.尚硅谷_尚优选-列表布局搭建
- 04.尚硅谷_尚优选-logo以及搜索框
- 05.尚硅谷_尚优选-商品分类导航布局
- 06.尚硅谷_尚优选-路径导航布局
- 07.尚硅谷_尚优选-路径导航数据动态渲染
- 08.尚硅谷_尚优选-左侧放大镜布局搭建
- 09.尚硅谷_尚优选-放大镜鼠标移入移出效果
- 10.尚硅谷_尚优选-放大镜鼠标移动实现蒙版元素的拖拽效果
- 11.尚硅谷_尚优选-蒙版元素移动的边界控制
- 12.尚硅谷_尚优选-放大镜移动实现大图元素等比例移动效果
- 13.尚硅谷_尚优选-放大镜缩略图布局搭建效果
- 14.尚硅谷_尚优选-放大镜缩略图数据动态渲染
- 15.尚硅谷_尚优选-点击缩略图实现换小图以及大图效果
- 16.尚硅谷_尚优选-实现缩略图点击左右箭头的图片轮播效果原理分析
- 17.尚硅谷_尚优选-计算每一次图片移动的距离以及ul移动的距离
- 18.尚硅谷_尚优选-右侧商品上半部分详情介绍的布局搭建
- 19.尚硅谷_尚优选-右侧商品上半部分详情介绍数据动态渲染
- 20.尚硅谷_尚优选-右侧商品下半部分商品参数布局搭建
- 21.尚硅谷_尚优选-右侧商品下半部分商品参数数据动态渲染
- 22.尚硅谷_尚优选-点击第一行商品参数的文字颜色排他效果
- 23.尚硅谷_尚优选-利用闭包函数来解决循环中事件里面的变量问题
- 24.尚硅谷_尚优选-实现选择结果的布局搭建
- 25.尚硅谷_尚优选-点击商品参数实现对应结果的动态添加
- 26.尚硅谷_尚优选-点击删除按钮实现删除对应参数数据
- 27.尚硅谷_尚优选-封装价格变动函数
- 28.尚硅谷_尚优选-购物车以及购买价格的布局搭建
- 29.尚硅谷_尚优选-中间左侧选项卡整体结构布局搭建
- 30.尚硅谷_尚优选-中间左侧选项卡具体内容布局搭建
- 31.尚硅谷_尚优选-中间右侧选择搭配的整体结构布局搭建
- 32.尚硅谷_尚优选-选择搭配中复选框选中状态的套餐价联动效果
- 33.尚硅谷_尚优选-中间右侧选项卡布局搭建
- 34.尚硅谷_尚优选-封装一个公共的选项卡函数并调用
- 35.尚硅谷_尚优选-右侧导航栏的上半部分搭建
- 36.尚硅谷_尚优选-右侧导航栏的中间布局搭建
- 37.尚硅谷_尚优选-右侧导航栏的点击切换状态实现