本节将在原有基础上添加一些JS效果
一. 加载动画---网页加载完成前的动画效果
-
涉及到的一些CSS知识点：
- 伪元素选择器---
::before、::after - 水平、垂直居中套路之---
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
- 动画---animation与@keyframes组合
CSS animation属性是如下属性的一个简写属性形式:
animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction和animation-fill-mode.
animation与@keyframes组合 使用就可产生动画效果；
- 定时器
setTimeout(function(){
siteWelcome.classList.remove('active')
},3000)
经过3000ms后再执行function（）{}；
-
涉及到的一些JS知识点：
二. 会变的topNavBar---当页面滑动时产生效果
-
涉及到的一些CSS知识点：
- word-break、overflow-wrap、white-space 比较
word-break：
normal
使用默认的断行规则。
break-all
对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。
keep-all
CJK 文本不断行。 Non-CJK 文本表现同 normal
overflow-wrap:
normal
表示在正常的单词结束处换行。
break-word
表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被被分割的单词会被强制分割换行
white-space:
normal
连续的空白符会被合并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。
nowrap
和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
pre
连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。
pre-wrap
连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充line盒子时才会换行。
pre-line
连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充line盒子时会换行。
-
涉及到的一些JS知识点：
- 与页面滑动有关的事件有两个: MouseScrollEvent 与 Scroll;
监听页面滚动事件，滚动后给 topNavBar 增加新的样式：
window.onscroll = function(xxx){
console.log(1); //测试
console.log(xxx);
console.log(window.scrollY);
if (window.scrollY > 0) {
yyy.classList.add('sticky')
}
}
三. 会变的menu---鼠标移到menu上时，浮现子menu
-
涉及到的一些CSS知识点：
- 使用absolute时的一点注意：
<body>
<div class="div1"></div>
</body>
--------------------------
.div1{
width:100px;
height:100px;
border: 10px solid red;
position:relative;
}
.div1::after{
content:'hhh';
font-size:20px;
border: 1px solid black;
position:absolute;
top:100%;
left:0px;
}
效果如下图：
从上图可看到：在计算top、left 时并没有考虑 父元素的border；
-
涉及到的一些JS知识点：
涉及到以下知识点的代码：
<div id="topNavBar" class="top-nav-bar clearfix">
<div class="top-nav-bar-inner clearfix">
<a href="" alt="logo">
<span class="rs">RS</span>
<span class="card">card</span>
</a>
<nav>
<ul class="clearfix">
<li class="menuTrigger">
<a href="">关于</a>
</li>
<li class="menuTrigger">
<a href="">技能</a>
</li>
<li class="menuTrigger">
<a href="">作品</a>
<ul class="submenu">
<li>作品1</li>
<li>作品2</li>
<li>作品3</li>
</ul>
</li>
<li class="menuTrigger">
<a href="">博客</a>
<ul class="submenu">
<li>博客1235455555</li>
<li>博客2</li>
<li>博客3</li>
</ul>
</li>
<li class="menuTrigger">
<a href="">日历</a>
</li>
<li class="menuTrigger">
<a href="">联系方式</a>
</li>
<li class="menuTrigger">
<a href="">其他</a>
</li>
</ul>
</nav>
</div>
</div>
------------------------------
let aTags = document.querySelectorAll(".top-nav-bar-inner>nav>ul>li>a")
console.log(aTags)
for(let i = 0; i < aTags.length; i++ ){
aTags[i].onmouseenter = function(xx){
let a = xx.currentTarget
let aBrother = a.nextSibling
console.log(aBrother)
while(aBrother.nodeType === 3){
aBrother = aBrother.nextSibling
}
console.log(aBrother)
}
}
mouseenter、mouseleave
mouseleave与mouseout的区别：
mouseenter与mouseover的区别：Document.getElementsByClassName()、x.getElementsByTagName()
当需要获取复数个element时可使用此API；Element.querySelectorAll()
返回一个non-live的
NodeList, 它包含所有元素的非活动节点，该元素来自与其匹配指定的CSS选择器组的元素。(基础元素本身不包括，即使它匹配。)
let aTags = document.querySelectorAll(".top-nav-bar-inner>nav>ul>li>a")
console.log(aTags)
----------------------------
打印结果：
NodeList(7) [a, a, a, a, a, a, a]
0:a
1:a
2:a
3:a
4:a
5:a
6:a
length:7
__proto__:NodeList
相似API：document.querySelector()---获取单个元素；
- Node.nextSibling
用于获取某个元素节点的下一个兄弟节点；
for(let i = 0; i < aTags.length; i++ ){
aTags[i].onmouseenter = function(xx){
let a = xx.currentTarget
let aBrother = a.nextSibling
console.log(aBrother)
while(aBrother.nodeType === 3){
aBrother = aBrother.nextSibling
}
console.log(aBrother)
}
}
-----------------
打印结果为：
#text
<ul class="submenu">…</ul>
查看打印结果发现：Node.nextSibling 所获取的不一定是 Tag标签，回车、文本都在获取范围内，因此需要判断获取节点的类别；
- Target与currentTarget
Target是触发事件时操作的那个元素；
currentTarget是监控事件所关联的那个元素；
四. 点击menu后，滚动到对应的页面位置
-
涉及到的一些CSS知识点：
-
涉及到的一些JS知识点：
- 通过 a 标签的 href 属性可以在点击后跳转到对应的标签位置
<li class="menuTrigger">
<a href="#siteAbout">关于</a>
</li>
<main id="siteAbout">
然而测试发现，由于导航栏是 fixed 定位方式，导致跳转后的标签页面被导航栏覆盖了一部分，因此页面实际滚动的 Y 轴距离要有一定增量，而 a 标签的默认跳转无法达到；
- 阻止 a 标签的默认跳转事件
aTags[i].onclick = function(xx){
let aTag = xx.currentTarget
console.log(xx)
xx.preventDefault() //这种写法可以阻止
aTag.preventDefault() // 这种写法不可以阻止？？？
}
- 获取 a 标签的 href 属性值--Element.getAttribute()
let href = a.getAttribute('href')
console.log(href)
let href2 = a.href
console.log(href2)
------------------
打印结果：
#siteWorks
http://127.0.0.1:8080/#siteWorks
对比发现：在浏览器中 a.href 获取的经过处理过的 href ，a.getAttribute('href') 获取的才是我们在HTML里实际写的值。
- Element.getBoundingClientRect()---返回元素的大小及其相对于视口的位置。
语法:
rectObject = object.getBoundingClientRect();
返回值是一个 DOMRect 对象，这个对象是由该元素的
getClientRects()方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。
DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
此API所获取的是相对位置，而不是绝对位置，并不符合我们的要求；
如何获取绝对位置？？？？
- HTMLElement.offsetTop
HTMLElement.offsetTop为只读属性，它返回当前元素相对于其offsetParent元素的顶部的距离。
语法
topPos = element.offsetTop;
参数
topPos为返回的像素数。
Element.getClientRects() 方法返回一个指向客户端中每一个盒子的边界矩形的矩形集合。
Window.scrollTo()----滚动到文档中的某个坐标。
语法
window.scrollTo(x-coord,y-coord )
window.scrollTo(options)
例子
window.scrollTo( 0, 1000 );
// 设置滚动行为改为平滑的滚动
window.scrollTo({
top: 1000,
behavior: "smooth"
});
