交互分析思路

交互分析

唯品会车边栏

1: 初始化静态样式。 该显示的显示；该隐藏的隐藏

2：实现动态交互：当鼠标移动到元素上时候，图片发生变化；标签有隐藏变为动画显示

• 1: 获取所有需要被操作的对象
• 2：初始化变量，在写业务时候可能用到的。（先用现写）
• 2.5 提前写好隐藏的样式，动画等
• 3：给dom 元素绑定 鼠标移上去的事件
• 4：通过给元素添加类名的方式，实现样式的交互
• 5：有bug 解决bug 根据需求分析；取 debug 或者输出方式

导航栏分析

1： 写样式：

• 1.5 写初始化静态样式
• 1.9 单独写好动态交互样式，只写样式

2： 动态交互

• 当鼠标滚动到某个位置时候I的；导航固定到顶部
• 1：所有备操作的dom
• 2: 监听滚动事件；当滚动条到 xxx 高度时候，导航定 过渡固定到顶部、

唯品会商品分诶 需求分析

1： 静态样式

• 初始化样式
• 动态交互时候；鼠标移上去样式。初始化隐藏。显示效果

2： 动态交互

• 1：显示 隐藏

• 2： 获取所有的被操作元素

• 2 : 初始化变量。true 表示显示 false 表示隐藏

• 3：绑定鼠标事件；

• 4： 在事件处理函数中实现动态交互。 并 【取反】

• 功能二：tab 切换

  • 选中素有的tab 标题；给每一个Tab 标题添加鼠标事件（注意: 变量取值是否为当前触发事件的元素）
  • 先清除所有的样式
  • 再添加样式。被选中的样式；以及对应显示的内容

唯品会左边栏

样式：

• 有样式
• 无样式

动态交互

• 监听鼠标滚动事件；当鼠标滚动某个位置时候；显示左边栏

京东每个选中动态交互

样式：

• 静态样式
• 鼠标移上去的样式

动态交互

1： 获取对应的元素

2： 给对应的元素添加；鼠标移上去事件 ；添加对应类名；显示对应样式

3: 当鼠标移下去时候，绑定鼠标移下去事件；添加对应类名；显示对应样式

京东tab 切换

1：样式

• 静态样式，初始化样式
• 单独写样式；当有动态交互时候；出现的样式
  • 过渡固定顶部
  • tab选项卡 被选中的 样式
  • 选项卡对应显示美容；其他为隐藏

2： 动态交互

• 选中所有被选中的tab选项卡
• 给每一个tab 绑定点击事件；（保证去确实选中的当前元素）
• 选中的元素添加；带有样式的类名
• 显示对应切换的内容，其他为隐藏 只需要 类名切换
• 在添加样式前；应该先清空所有的样式；再天添加样式

遮罩层动态交互分析

1： 静态样式

• 无遮罩层的样式
• 有这层的样式。遮罩层下面的事件不能被触发

2： 动态交互样式

• 显示隐藏功能；
• 阻止默认事件
• 1; 选素有被操作的元素
• 2： 给某个按钮绑定点击事件
• 3： 在事件处理函数中事件动态样式交互
• 4 ： 找好位置值默认事件

美团 下拉刷新

当手指往下华东页面时候；页面山所有的数据进行刷新

样式哪

• 静态样式 初始化养护室
• 手指滑动时的样式。初始化化不加给任何元素

动态交互

• 给页面添加 【手指华滑动事件】
• 在事件处理函数中；给对应元素添加列明实现样式
• 在是按处理函数中；对页面进行刷新处理 （重新加载）

美团上拉加载更多

样式

• 静态样式 初始化；
• 手指滑动时候样式；

动态交互

• 给对应的元素绑定【手指滑动事件】
• 监听页面滚动事件；当页面滑动到底部时候；出现手指滑动【样式】
• 加载数据；并将远离数据与新数据进行累加展示在页面上

​