weipinhui

介绍

唯品会的注册，登录，首页，商品列表，商品详情，购物车等页面，本项目为学习练手项目，非商业用途。

1.注册功能：正则验证

2.登录功能：登录成功将用户信息通过localStorage存入本地

3.首页：静态页面，导航，轮播图，当页面滚动距离大于一定距离时，商品分类会变成固定窗口，鼠标点击商品进入商品列表页面

4.商品列表：显示后台所添加的所有商品，当页面滚动距离大于一定距离时，会形成一个固定窗口，滑过每个商品的时候有hover效果。点击商品进入商品详情页面

5.商品详情：根据传入的商品id展示商品详情，将要加入购物车的商品数量增加，减少，以及计算价格点击颜色和尺码的时候能够来回切换。点击加入购物车的时候，右边会出现“加入购物车成功，进入购物车”窗口。3秒内不进入，窗口会消失。

6.购物车：显示用户购物车的信息，对商品数量增加及减少和删除，选中商品时，会开启倒计时，并且计算总价及商品数量。对商品种类的增加和减少，倒计时会进行相应的处理。

软件架构

html为html脚本文件夹 css为样式表文件夹 js为javascript及jquery脚本文件夹 swiper为项目所需轮播插件文件夹 img为项目静态资源文件夹

使用教程

下载项目代码，进入根目录打开index.html，即可看到唯品会练手项目展示。

特技

1. swiper轮播
2. jquery脚本
3. 监听滚动页面交互
4. 定时关闭购物袋
5. jquery选项卡制作
6. 购物袋总价动态实现
7. 购物袋选择商品开启倒计时实现

git仓库地址

https://gitee.com/twelvethth/weipinhui