1 a鏈接
- 如果href未設置，或設置為#；頁面會默認跳轉到頂部
- 阻止a鏈接跳轉：
- 設置：
<a href="javascript:;">...</a>; - 設置：
<a href="javascript:void(0);">...</a>;
- 設置：
- a鏈接一般可以用于錨點設置
- 代碼：錨鏈
<a href="#div1">..</a>，錨點<div id="div1">..</div>;
- 代碼：錨鏈
2 回到頂部實例
- 思路：
- Css樣式中a標簽為行內元素，無法設置寬高，但是當添加固定定位后，脫離文檔流，默認轉為塊狀元素，可以設置寬高；
- 給按鈕添加點擊事件，確定速度與頻率，進而確定步長，然后針對瀏覽器卷去的長度來進行比較，利用定時器進行多次操作，函數(shù)內獲取實時的卷去長度，減等步長，再設置新的卷去長度，反復進行，判斷實時的卷去長度是否小于等于0，此時設置卷去長度為0，即回到頂部，clearInterval關閉定時器，return阻斷程序執(zhí)行；
- 升級1：當卷去長度小于等于一屏的高度時，按鈕隱藏，當卷去長度大于一屏的高度后，按鈕顯示，一屏的高度用clientHeight來獲取，設置樣式用
oBtn.style.display="block"，給window添加onscroll滾動事件； - 升級2：當點擊按鈕后，讓按鈕隱藏，所以在點擊事件中添加
this.style.display="none";,當每次點擊后，按鈕都會隱藏；但是會出現(xiàn)bug，按鈕隱藏后，會立刻顯示，因為與onscroll事件沖突，所以需要在點擊事件中添加window.onscroll=null，給事件賦值null，事件不執(zhí)行，當點擊事件中，計時器停止后，即回到頂部，在重新設置滾動事件window.onscroll=add;add指的是函數(shù)的定義階段，添加位置一定要在return前面，定時器停止后；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回到頂部</title> <style> *{ margin: 0; padding: 0; } .wrap{ width: 100%; height: 3000px; background: -webkit-linear-gradient(top,lightskyblue,lightsalmon,lightseagreen,red); } .wrap a{ width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50%; background-color: yellow; font-size: 10px; color: black; font-weight: bold; text-decoration: none; position: fixed; right: 20px; bottom: 20px; display: none; } </style> </head> <body> <div class="wrap"><a href="javascript:void(0);">toTop</a></div> <script src="utils2.js"></script> <script> //添加點擊事件，確定步長step，由速度和頻率決定，v,f,總距離為scrollTop瀏覽器卷去的長度 //升級1 卷去距離小于一屏的高度，按鈕隱藏，大于后，按鈕顯示，添加滾動事件onscroll //升級2 當點擊事件觸發(fā)時，按鈕消失，回到頂部 var oBtn=document.getElementsByTagName("a")[0]; window.onscroll=add; function add(){ var curScroll=utils.win("scrollTop"); if(curScroll>=utils.win("clientHeight")){ oBtn.style.display="block"; }else{ oBtn.style.display="none"; } } oBtn.onclick=function () { this.style.display="none"; window.onscroll=null;//事件賦值null，事件停止 var v=1; var f=10; var step=v*f; var timer=setInterval(function () { var curTop=utils.win("scrollTop"); curTop-=step; if(curTop<=0){ utils.win("scrllTop",0); clearInterval(timer); window.onscroll=add;//一定要放在return前面 return;//阻斷程序執(zhí)行； } //改變curTop后，要設置 utils.win("scrollTop",curTop); }); }; </script> </body> </html>
3 回到頂部隨時停下實例
- 知識點：
- 需求：在點擊事件觸發(fā)后，回到頂部過程中，滑動滾輪使其停止
- 思路：添加開關oBk，給其賦值為false，在滾動事件中進行判斷，當oBk為true時，點擊事件中的定時器停止，判斷條件后在滾動事件中給bOk重新賦值true，因為滾動事件發(fā)生會連續(xù)觸發(fā)多次，將oBk賦值為true，才能停止，前提是要快過點擊事件中的定時器的重復執(zhí)行時間，在點擊事件定時器后，要給oBk重新賦值為false
- 注意點：
- 點擊事件中的timer要設為全局變量，因為點擊事件和滾動事件是兩個函數(shù)，會形成兩個私有作用域，兩者之間是不會相互查找的；
- 點擊事件中在最后要給oBk賦值為false,滾動事件中，給oBk賦值為true,一定要在判斷條件之后；
- 保證能夠停下來，點擊事件中的定時器觸發(fā)時間要在20s以上；
- 在回到頂部實例中，在點擊事件中會設置
window.onscroll=null，如果添加此代碼，不能再停止，因為滾動事件已經(jīng)被賦值為null，沒有了點擊事件；
<script> //升級3 當手動滾動時，讓回到頂部中的定時器停止 //分析：onscroll時間當滾動一下就會觸發(fā)多次，但是要保證滾動的連續(xù)觸發(fā)時間大于定時器的觸發(fā)時間f;f一般大于20就可以； //注意：停的定時器timer為全局變量，定時器的時間需要在20以上，添加開關 var oBtn=document.getElementsByTagName("a")[0]; var bOk=false; var timer=null; window.onscroll=add; function add(){ if(bOk){ clearInterval(timer); } bOk=true; var curScroll=utils.win("scrollTop"); if(curScroll>=utils.win("clientHeight")){ oBtn.style.display="block"; }else{ oBtn.style.display="none"; } } oBtn.onclick=function () { this.style.display="none"; //window.onscroll=null;//事件賦值null，事件停止 var v=1; var f=30; var step=v*f; timer=setInterval(function () {//timer要設置為全局變量，才能在滾動事件中獲取到 var curTop=utils.win("scrollTop"); curTop-=step; if(curTop<=0){ utils.win("scrllTop",0); clearInterval(timer); return;//阻斷程序執(zhí)行； } //改變curTop后，要設置 utils.win("scrollTop",curTop); bOk=false; },f); }; </script>
4 回到頂部點擊隱藏+隨時停下實例
- 知識點：
- 需求：在點擊回到頂部按鈕，按鈕隱藏，在回到頂部過程中，滑動滾輪使其停止
- 思路：終極版升級，通過設置兩個滾動函數(shù)，一個目的是判斷按鈕的顯示和隱藏；一個目的是滑動鼠標滾輪，滾動停止；
- 注意點：
- 頁面加載時，給window.onscroll賦值為scrollDisplay函數(shù)，根據(jù)卷去高度來判斷按鈕的顯示和隱藏；
- 點擊事件觸發(fā)后，按鈕隱藏，并給window.onscroll重新賦值為scrollStop函數(shù)，此時就可以通過滑動鼠標滾輪來隨時停下滾動條了；
- 當停下滾動條后，即在scrollStop函數(shù)中停止定時器時，必須重新給window.onscroll賦值為scrollDisplay，用來判斷停下時刻，按鈕是顯示還是隱藏；
- 在定時器匿名函數(shù)中，當卷去高度為0時，停止定時器后，一定要再給window.onscroll賦值為scrollDisplay;此時才能恢復到點擊前的初始效果；
<script> var oBtn=document.getElementsByTagName("a")[0]; var bOk=false; var timer=null; window.onscroll=scrollDisplay; oBtn.onclick=function () { this.style.display="none"; window.onscroll=scrollStop;//事件賦值scrollStop函數(shù)，事件可以隨時停下； var v=1; var f=30; var step=v*f; timer=setInterval(function () {//timer要設置為全局變量，才能在滾動事件中獲取到 var curTop=utils.win("scrollTop"); curTop-=step; if(curTop<=0){ utils.win("scrllTop",0); clearInterval(timer); window.onscroll=scrollDisplay; return;//阻斷程序執(zhí)行； } //改變curTop后，要設置 utils.win("scrollTop",curTop); bOk=false; },f); }; //判斷按鈕的顯示和隱藏 function scrollDisplay(){ var curScroll=utils.win("scrollTop"); if(curScroll>=utils.win("clientHeight")){ oBtn.style.display="block"; }else{ oBtn.style.display="none"; } } //鼠標滑動立即停下 function scrollStop(){ if(bOk){ clearInterval(timer); window.onscroll=scrollDisplay; } bOk=true; } </script>
5 元素分步顯示實例
- 知識點：
- 利用定時器來控制元素的顯示的時間間隔，利用全局變量n的變化來作為元素集合的索引值，進行遍歷操作；
- 代碼中span為行內元素，所以會設置
display:inline-block,不能再設置display:none，可以利用透明度來隱藏；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素分步顯示</title> <style> span{ display: inline-block; width: 100px; height: 100px; line-height: 100px; border-radius: 50px; margin: 10px; text-align: center; background-color: red; font-size: 30px; opacity: 0; } </style> </head> <body> <span>恭</span><span>喜</span><span>大</span><span>家</span><span>發(fā)</span><span>財</span> <script> var aSpan=document.getElementsByTagName("span"); var n=0; var timer=setInterval(function () { if(n>=aSpan.length){ clearInterval(timer); return;//阻斷程序執(zhí)行 } aSpan[n++].style.opacity=1; },400) </script> </body> </html>
6 單張圖片的延遲加載實例
- 知識點：
- 兩個事件，onload事件元素加載成功觸發(fā)，onerror事件，元素加載失敗觸發(fā)；
- 圖片加載附地址時，可以新建一個替身圖片，可以用
tempImg=new Image創(chuàng)建，也可以用tempImg=document.createElement("image")創(chuàng)建； - 元素身上系統(tǒng)屬性可以用點獲取或設置，但是元素身上已經(jīng)定義過的自定義屬性，不能用點獲取，必須用getAttribute獲?。?/li>
- 尋找元素的父級結構元素，利用
ele.parentNode獲取 - 設置元素的行間樣式，用點就能設置，設置元素的非行間樣式，用style設置；
- 思路：
- 圖片要成功加載，必須觸發(fā)滾輪事件
window.onscroll - 圖片加載的條件：
img.offsetTop+img.offsetHeight<scrollTop+clientHeight; - 圖片開始加載
- 1)先找一個臨時的圖片對象
tempImg=new Image等同于tempImg=document.createElement("image"); - 2)把要用的圖片地址，利用tempImg校驗下
- 3)校驗結果：onload onerror
- 4)如果成功，則觸發(fā)onload事件，把正確的地址賦值給真正的img標簽，一定要注意性能優(yōu)化
- 圖片只加載一次img.loaded=true;
- 釋放臨時圖片對象
tempImg=null;
- 5)如果不成功，則觸發(fā)onerror事件，同上；
- 1)先找一個臨時的圖片對象
- img標簽的src屬性必須添加值，否則img不顯示，就沒有offsetHeight值；
- 圖片要成功加載，必須觸發(fā)滾輪事件
- 代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>單張圖片延遲加載</title> <style> body,html{ width: 100%; height: 200%; } div{ position: absolute; top: 1000px; } p{ width: 200px; height: 200px; background: url("image/2.jpg") center no-repeat #ffffff; background-size: 100% 100%; } p img{ width: 100%; height: 100%; } </style> </head> <body> <div> <p><img src="image/2.jpg" realImage="image/1.jpg"/></p> </div> <script src="utils2.js"></script> <script> var oImg=document.getElementsByTagName("img")[0]; window.onscroll=function () { var scrollBot=utils.win("scrollTop")+utils.win("clientHeight"); var imgTop=utils.offset(oImg).Top+oImg.offsetHeight; if(imgTop<scrollBot){ Lazyload(); } }; function Lazyload() { //避免重復加載 if(oImg.loaded){ return;//阻斷程序執(zhí)行； } //新建一個臨時的替身圖片 var tempImg=new Image();//也可以寫成tempImg=document.createElement("img") //將地址賦給臨時替身圖片，驗證替身圖片是否加載成功 tempImg.src=oImg.getAttribute("realImage");//元素身上已經(jīng)存在的自定義屬性，不能有點來獲取 //加載成功 tempImg.onload=function () { oImg.src=this.src; oImg.loaded=true;//添加自定義屬性，只讓onload事件觸發(fā)一次； tempImg=null;//性能優(yōu)化，將沒用的元素刪除； }; //加載失敗 tempImg.onerror=function () { oImg.parentNode.style.backgroundImage='url("image/3.jpg")';//設置元素的非行間樣式，用style，改變p元素的背景圖； oImg.loaded=true; tempImg=null; } } </script> </body> </html>
7 多張圖片的延遲加載實例
- 知識點：遍歷多個圖片元素，然后調用函數(shù)執(zhí)行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多張圖片的延遲加載</title> <style> body,html{ width: 100%; height: 200%; } div{ width: 200px; height: 200px; margin-bottom: 20px; background: url("image/5.jpg") center no-repeat #ffffff; background-size: 100% 100%; } div img{ width: 100%; height: 100%; } </style> </head> <body> <p style="height: 1000px;"></p> <div><img src="image/5.jpg" realImage="image/1.jpg" alt=""></div> <div><img src="image/5.jpg" realImage="image/2.jpg" alt=""></div> <div><img src="image/5.jpg" realImage="image/33.jpg" alt=""></div> <div><img src="image/5.jpg" realImage="image/4.jpg" alt=""></div> <script src="utils2.js"></script> <script> var aImg=document.getElementsByTagName("img"); window.onscroll=function () { for(var i=0; i<aImg.length; i++){ var scrollBot=utils.win("scrollTop")+utils.win("clientHeight"); var imgTop=utils.offset(aImg[i]).Top+aImg[i].offsetHeight+188; if(imgTop<scrollBot){ lazyLoad(aImg[i]); } } }; function lazyLoad(img) { if(img.loaded) return; var Imgfrg=document.createElement("img"); Imgfrg.src=img.getAttribute("realImage"); Imgfrg.onload=function () { img.src=this.src; Imgfrg=null; img.loaded=true; }; Imgfrg.onerror=function () { img.parentNode.style.backgroundImage='url(image/6.jpg)'; Imgfrg=null; img.loaded=true; }; } </script> </body> </html>
