项目复盘

华为项目复盘

header

操作互斥，点击切高度
0. 布局：width100%，height先正常写
再
2. 核心函数1
三个参数，区域1，2，高度
改变style【高度】

1. 条件触发核心函数
   条件：

• 左点击-->右内容无论如何都hidden【判断有无内容，有左边的内容--hidden，反之，show】
  用offsetHeight方法确定

1. 左边有内容
   全部都不见
2. 左边没有内容
   显示左边
   右边同一逻辑

nav

上下滑动内容的出现与消失

功能，页面向下滑动nav消失，向上滑动，nav固定在最上方，页面进入到一定位置正常显示header

1. 监听项目
   nav，滑轮

• ♥ nav用qu……操作
• ♥window.pageYOffset方法
  现在主程序得到上一秒的滚轮位置，再在事件队列里监听scroll得到下一秒的滚轮位置,
  事件队列： 核心函数
  

悬浮显示

涉及对象处理，要一一对应

• for遍历数组[一组控制另一组]，监听加执行mousemove，mouseout

1. subject转化成数组Array.from()方法
2. indexOf() 返回当前元素的下标
3. 改变opacity

点击出现与消失

就是仔细一点，每个图标不要搞混了！！
.onclick匿名函数实现display改变，也可以类切换，涉及到css动画了,这里没有用是因为一开始就错了，我应该重新写一个新的nav作为整体出现与消失，这样设置css动画才不会变形，不然只有部分是动画效果

过渡自然的css动画怎么写


最简单的用transition

轮播图

1. 布局：大盒子relative，overflow，宽高
   设置小盒子，背景图片装入小盒子里，设置为absolute，宽高100%
2. 为了好看，切换类名，opacity切换
3. 核心函数

• 展示当前图片，隐藏剩下的所有
  一个控制逻辑，直接foreach
• 左右切换的取余算法
• serInterval的自动轮播【就是把点击事件改成了自己播放】
• 监听，鼠标在悬浮就清除间隔

返回顶部

监听当前scroll的位置，总的高度
当滚动位置超过视口高度的百分比时显示图标,刷数据
点击触发函数

模糊化，设置黑色半透明的笼罩层，一个盒子

可是只在最开始点击有用欸

图片变化，位移不变

overflow + hoverscale（比例）

进度条

自定义动画
@keyframes name{
0%{
width； 0；
}
100%{
width:100%;
}
}

animation: name 3s infinite