本節(jié)將在原有基礎上添加一些JS效果
一. 加載動畫---網(wǎng)頁加載完成前的動畫效果
-
涉及到的一些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組合 使用就可產(chǎn)生動畫效果；
- 定時器
setTimeout(function(){
siteWelcome.classList.remove('active')
},3000)
經(jīng)過3000ms后再執(zhí)行function（）{}；
-
涉及到的一些JS知識點：
二. 會變的topNavBar---當頁面滑動時產(chǎn)生效果
-
涉及到的一些CSS知識點：
- word-break、overflow-wrap、white-space 比較
word-break：
normal
使用默認的斷行規(guī)則。
break-all
對于non-CJK (CJK 指中文/日文/韓文) 文本，可在任意字符間斷行。
keep-all
CJK 文本不斷行。 Non-CJK 文本表現(xiàn)同 normal
overflow-wrap:
normal
表示在正常的單詞結(jié)束處換行。
break-word
表示如果行內(nèi)沒有多余的地方容納該單詞到結(jié)尾，則那些正常的不能被被分割的單詞會被強制分割換行
white-space:
normal
連續(xù)的空白符會被合并，換行符會被當作空白符來處理。填充line盒子時，必要的話會換行。
nowrap
和 normal 一樣，連續(xù)的空白符會被合并。但文本內(nèi)的換行無效。
pre
連續(xù)的空白符會被保留。在遇到換行符或者<br>元素時才會換行。
pre-wrap
連續(xù)的空白符會被保留。在遇到換行符或者<br>元素，或者需要為了填充line盒子時才會換行。
pre-line
連續(xù)的空白符會被合并。在遇到換行符或者<br>元素，或者需要為了填充line盒子時會換行。
-
涉及到的一些JS知識點：
- 與頁面滑動有關的事件有兩個: MouseScrollEvent 與 Scroll;
監(jiān)聽頁面滾動事件，滾動后給 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上時，浮現(xiàn)子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="">聯(lián)系方式</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的區(qū)別：
mouseenter與mouseover的區(qū)別：Document.getElementsByClassName()、x.getElementsByTagName()
當需要獲取復數(shù)個element時可使用此API；Element.querySelectorAll()
返回一個non-live的
NodeList, 它包含所有元素的非活動節(jié)點，該元素來自與其匹配指定的CSS選擇器組的元素。(基礎元素本身不包括，即使它匹配。)
let aTags = document.querySelectorAll(".top-nav-bar-inner>nav>ul>li>a")
console.log(aTags)
----------------------------
打印結(jié)果：
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
用于獲取某個元素節(jié)點的下一個兄弟節(jié)點；
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)
}
}
-----------------
打印結(jié)果為：
#text
<ul class=?"submenu">?…?</ul>?
查看打印結(jié)果發(fā)現(xiàn)：Node.nextSibling 所獲取的不一定是 Tag標簽，回車、文本都在獲取范圍內(nèi)，因此需要判斷獲取節(jié)點的類別；
- Target與currentTarget
Target是觸發(fā)事件時操作的那個元素；
currentTarget是監(jiān)控事件所關聯(lián)的那個元素；
四. 點擊menu后，滾動到對應的頁面位置
-
涉及到的一些CSS知識點：
-
涉及到的一些JS知識點：
- 通過 a 標簽的 href 屬性可以在點擊后跳轉(zhuǎn)到對應的標簽位置
<li class="menuTrigger">
<a href="#siteAbout">關于</a>
</li>
<main id="siteAbout">
然而測試發(fā)現(xiàn)，由于導航欄是 fixed 定位方式，導致跳轉(zhuǎn)后的標簽頁面被導航欄覆蓋了一部分，因此頁面實際滾動的 Y 軸距離要有一定增量，而 a 標簽的默認跳轉(zhuǎn)無法達到；
- 阻止 a 標簽的默認跳轉(zhuǎn)事件
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)
------------------
打印結(jié)果：
#siteWorks
http://127.0.0.1:8080/#siteWorks
對比發(fā)現(xiàn)：在瀏覽器中 a.href 獲取的經(jīng)過處理過的 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;
參數(shù)
topPos為返回的像素數(shù)。
Element.getClientRects() 方法返回一個指向客戶端中每一個盒子的邊界矩形的矩形集合。
Window.scrollTo()----滾動到文檔中的某個坐標。
語法
window.scrollTo(x-coord,y-coord )
window.scrollTo(options)
例子
window.scrollTo( 0, 1000 );
// 設置滾動行為改為平滑的滾動
window.scrollTo({
top: 1000,
behavior: "smooth"
});
