image.png
一、loading
先做出loading时候的二个圈圈的涟漪效果
然后在进一步提升逼格，不用这个劳什子的div,用伪元素
现在把做好的东西加入到页面中,因为是最先出来的，所以加在html的style的里面，然后remove active放在最后面，就是页面加载完毕的时候，加载太快了，为了看见效果，加个延迟
233.PNG
二、鼠标向下滚动就会变化的第一栏
2311.PNG
这里的stick状态，某个东西的状态激活和不激活不一样，比如颜色，这个时候如果激活不在它最近的那个标签发生，那么最好让他是继承的，不然就近给定下来了，激活某个状态也敌不过它本身自带的状态
2312.PNG
三、让鼠标移到导航栏相应的字上面就出现下面的submenu
1、先通过a标签找到它的兄弟标签ul（再之前的a下面加上菜单），因为之间可能有回车什么的，所以要加一个while循环来确定我们找到是ul，3是文本，1是结点
234.PNG
或者用
brother.tagName=='UL'//注意这里是大写
235.PNG
2、无法把鼠标移到submenu上面，因为ul和a是兄弟啊，离开a就没得active了
236.PNG
所以我们改成监听ul的爹爹li了，注意这里menuTigger的class也要改放在相应的li上面了哦
brother=li.getElementByClassName('ul')[0]
li加前面表示在这个标签范围里用getElementByClassName得到为ul的标签，一定是返回一个数组的就算这里只有一个也是返回一个数组，所以加上下标[0]
237.PNG
3、鼠标终于可以去submeue，但是鼠标hover状态消失，红线又没有了，所以直接把active和hover上去显示的红线放在li上面做
238.PNG
4、利用class为menuTigger激活active（加了submenu的那几个li才有），问题是其他的li没有active状态（显示红线也利用active达成的），改成把这个导航栏里面所有的li都激活active
liTags=document.querySelectorAll('nav.menu>ul>li')
2310.PNG
四、页面内部的跳转
239.PNG
let aTags=document.querySelectorAll('nav.menu>ul>li>a')
for(let i=0;i<aTags.length;i++){
aTags[i].onclick=function(x){
x.preventDefault()//阻止默认动作，这里是跳转，但是跳转的位置不是我们想要的
let a=x.currentTarget
//console.log(a.href)是被浏览器处理过的，带着http协议的，所以不用这个，用下面的
let href=a.getAttribute('href')//用户写什么就是什么，这里是#siteSkill之类
let element=document.querySelector(href)
let top=element.offsetTop//得到的元素距离顶部的位置，是个固定值，而用getBoundingClientRect得到的是距离窗口的距离，所以会变化
window.scrollTo(0,top-80)//让当前窗口定位到这个位置
}
}
四、点击链接跳到下面对应内容，要做出来慢慢滑动的效果
setTimeout(()=>{
div.style.left='100px'//注意这里100px是字符串
},3000)//3s
上面的只能动一次，改成连续动，欺骗眼睛
id=setTimeInterval(()=>{
n=n+1
div.style.left=n+'px'
if(n>=200){window.clearInterval(id)}//砸掉闹钟
},40)
image.png
进一步改善，让速度均匀，利用缓动函数，去cdnjs这个网站引入tween的js库，在不懂的情况下利用已知信息解决需求
五、高亮当前元素
<div date-x d="siteAbout"></div>
在对应要找的标签里面加上属性date-x
用下面的选择器，只要含这个属性的标签都找出来
let specialTags=document.querySelectorAll('[date-x]')
specialTags[i].offsetTop为这些标签离页面顶部距离
和当前视口离页面顶部距离（window.scrollY）比较，找出最小值
注意：之前的跳转是利用监听click，取点击对象的currentTarget
做高亮的效果
specialTags[min].classList.add('active');
[date-x].active{
outline:1px solid red;
}
注意：还有对应的要remove
let id=specialTags[min].id
a=document.querySelector('a[href="# '+id+' " ]')注意这里选择器的写法,href="#hhh"，本身带一对引号的
let li=a.parentNode
let brotherAndMe=li.parentNode.children//然后干掉所有active，后面再给要用的那个加上active
之前做的状态也用active，这里和之前的冲突了，所以这边的改成highlight
六、做浏览到某个页面的时候，这个部分会从下往上加载的效果
[date-x].aninate{
animation:slideup 1s;
}
@keyframes slideup{
0%{
transform:translateY(30px;)
}
100%{
transform:translateY(0px;)
}
}
不是我们想要的效果
[date-x].offset{
transform:translateY(100px)
}
[date-x]{
transform:translateY(0px)
transition:all 0.5s;
}
是我们要的效果，但是第一部分没有滚动不行，所以在第一部分之前要把第一部分激活为offset状态
七、进度条
没有被激活时候，
transform:translateX(0%)；
transition:all 0.5s;
被激活时候，
transform:translateX(-100%)
注意：要在父元素加上overflow：hidden
网友评论