靜態(tài)效果的實(shí)現(xiàn)
網(wǎng)頁(yè)頂部加載進(jìn)度條，近年來(lái)很流行，很多網(wǎng)站都采用了這種加載方式。網(wǎng)上也有這樣類似的插件，今天我們總結(jié)一下網(wǎng)頁(yè)頂部線性頁(yè)面加載進(jìn)度條。
大體的寫法如下：
body{ margin:0; } #progress { position:fixed; height: 2px; background:#2085c5; transition:opacity 500ms linear } #progress.done { opacity:0 } #progress span { position:absolute; height:2px; -webkit-box-shadow:#2085c5 1px 0 6px 1px; -webkit-border-radius:100%; opacity:1; width:150px; right:-10px; -webkit-animation:pulse 2s ease-out 0s infinite; } @-webkit-keyframes pulse { 30% { opacity:.6 } 60% { opacity:0; } 100% { opacity:.6 }}html代碼：
<div id="progress"> <span></span></div>
jquery代碼：
$({property: 0}).animate({property: 100}, { duration: 3000, step: function() { var percentage = Math.round(this.property); $('#progress').css('width', percentage+"%"); if(percentage == 100) { $("#progress").addClass("done");//完成，隱藏進(jìn)度條 } }});設(shè)定其持續(xù)時(shí)間是3秒鐘！你可以改動(dòng)一下，把3秒鐘的時(shí)間改成你網(wǎng)頁(yè)的加載時(shí)間，就可以做出網(wǎng)頁(yè)動(dòng)態(tài)加載進(jìn)度條了。。
頁(yè)面加載插件的實(shí)際應(yīng)用及l(fā)oad函數(shù)的運(yùn)用
關(guān)于頁(yè)面的加載，很難找到一個(gè)很好的方法來(lái)獲取頁(yè)面的實(shí)際下載進(jìn)度。下面介紹的方法是運(yùn)用 $(window).load(function() {})和$(document).ready(function(){})來(lái)進(jìn)行的，雖然這種方法不是很準(zhǔn)確，但是也可以模擬網(wǎng)頁(yè)的下載。
$(function(){NProgress.start();})$(window).load(function() { NProgress.done();})有很多朋友可能對(duì) $(window).load(function() {})和$(document).ready(function(){})的區(qū)別不是很了解。大家可以寫一個(gè)小案例來(lái)測(cè)試一下！
例如：
$(window).load(function() { alert("我是load")})$(function(){ alert("我是document.ready")})很明顯，肯定是document.ready先執(zhí)行，因?yàn)閐ocument.ready是在DOM結(jié)構(gòu)載入完后執(zhí)行的，不需要載入得這么“完全”，而$(window).load則是頁(yè)面全部?jī)?nèi)容加載完成后執(zhí)行的。
有時(shí)候，
$(window).load(function() { alert("我是load")})也可以用js的寫法：
window.onload = function(){ ... } 都是在頁(yè)面全部下載完成之后來(lái)執(zhí)行的。兩種寫法是等價(jià)的！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
