js实现页面中的弹框，小米官网右上角购物车。大神指教

JavaScript019

js实现页面中的弹框，小米官网右上角购物车。大神指教,第1张

不用写js事件，写了js事件反而不好控制

购物车图标和下面的下拉菜单是在一个父元素当中的

添加样式

.abc div{

display:none

}

.abc:hover div{

display:block

}

样例参考附件即可，采纳即可。

产品名称：小米有品App

体验机型：华为P20

系统版本：EMUI9.1.0

APP版本：3.4.0.1797

体验时间：2019.12.22-2019.12.23

一、产品简介

产品名称：小米有品

产品类型：小米线上精品生活购物平台

Slogan：有品质，放心买

产品定位：小米有品是小米精品生活购物平台，也是小米“新零售”战略的重要一环。依托小米生态链体系，延续小米的“爆品”模式，用小米模式做生活消费品。作为一个开放但品控严格的电商平台，除了小米、米家及生态链品牌，有品还引入大批优质的第三方品牌产品，并扶持三方品牌独立发展，共同为用户打造有品质的生活。

二、背景与目的

体验”小米有品“的加入购物车页流程，画出原型图，以锻炼我的基本功画原型的能力。

二、页面流程

图1为”小米有品“的加入购物车页流程。

（图1）

用户加入购物车的入口主要有三个，分别是：

1、从首页搜索框中检索商品；

2、在首页中，挑选各模块，点击模块即可；

3、在购物车页面，无任何商品，点击去逛逛，跳转至首页。

以上三各入口都会进入商品列表页，选择某商品，进入商品详情页，在加入购物车之前，需要输入必填项，即可成功加入购物车。

三、原型图

图2为“小米有品“首页原型图与实际效果图。

2、在搜索页，点击搜索框，输入搜索的商品，点击搜索按钮，商品列表展示。

商品列表原型图说明

1、展现形式按钮，可切换商品列表展现形式。

2、可按照综合（综合排序、销量排序）、新品、价格、信用进行商品列表排序。

3、可点击筛选按钮，对所列商品进行排序。

4、点击某商品，进入商品详情页。

图5为“小米有品“商品详情页原型图与实际效果图。