2018-01-10 给简历加JS特效

1、滚动页面的时候，导航栏会变颜色

image.png

效果名字叫sticky navbar

2、当前窗口显示啥的时候，导航栏上面的标题下划线会相应的变红

image.png

效果名字叫auto highlight navbar

3、当点击标题栏上的标题时，当前窗口自动滑到相应的位子

效果名字叫auto scroll smoothly

4、标题的下拉菜单 menu

5、侧边栏 auto hide aside

6、无缝轮播

7、效果加载 loading animation

image.png

8、animate when scroll 只有滚动到了之后，才会加载动画

复制代码下载

image.png

本地建一个路径，然后

image.png

实际操作

image.png

image.png

image.png

先做第7个效果
实际上有2个圈，另一个圈比第一个圈晚几秒出现，每个圈都是逐渐变大，并且颜色逐渐变淡

http://js.jirengu.com/xipif/1/edit?html,css,output

用before after优化
http://js.jirengu.com/zoxuy/1/edit?html,css,output

z-index

居中
justify-content: center;
align-items: center;

为了演示效果

image.png

自己添加延迟网络

image.png

通过setTimeout来模拟加载效果

///////////////////////////////////////////////////////滚动之后变色效果

image.png

滚动事件和滚动鼠标事件
window.onscroll

////////////////////////////////////////////////
border从左往右出来
搜css border left to right
不用border，用另外一种思路，用div

image.png

//////////////////////////////////////////////////做二级菜单
放在a标签的外面

浮动定位有个特点，能多瘦就多瘦

image.png

包住他们的li是个浮动定位 ，作品 是个文档流元素 li认为至少包住作品两个字，么有至多
作品1 作品2 作品3是个绝对定位元素
方法：让里面的li不换行

image.png

image.png

绝对定位：不受父元素影响，也不影响父元素

//////////////////////////////////////////////////////////////下拉菜单加监听事件
x.target target是用户操作的那个元素
x.currentTarget currentTarget 是我们监听的那个元素
两个有可能不一样，操作的元素可能是监听的元素的一部分

找a标签的弟弟
mdn brother element
a.nextSiblings可能找到的是个回车，并不是我们想要的结果

mdn node type

image.png

toLowerCase() 大写变小写

image.png

如果是2个class 则.与.之间要有空格，如果是同一个class，需要级联，则.与.之间紧挨着

image.png

有空隙，鼠标移动后就进入不到ul那里

方法：监听对象应该是a和ul的父标签

image.png

把a标签的下划线的hover去掉，使a和ul一起，鼠标放进去之后，有下拉菜单也有下划线

解决一个问题的关键是：马上开始着手解决这个问题

//////////////////////////////////////////////////////当点击标题栏上的标题时，当前窗口自动滑到相应的位子
加锚点

点击标题后，窗口往上滑动过多（原因是被上面悬浮的navbar遮住了）

image.png

解决一：给每一个（比如作品集加上一个内边距：padding-top:60px）

方法二：不用锚点，用JS做
x.preventDefault() 阻止浏览器默认跳转

用JS来帮忙滚动

a.href是带http协议的

a.getAttribute('href') 用户写什么就是什么，不用做任何处理,，比如

image.png

debugger 加断点

image.png

image.png

offsetTop 距离页面顶端的距离

image.png

上面这个距离不是我们想要的