由于程序和網(wǎng)絡(luò)的原因，常常我們需要在交互的時(shí)候，給用戶一個(gè)正在加載中的動(dòng)畫，于是，loading組件橫空出世。不需要復(fù)雜的代碼，也能完成大多數(shù)業(yè)務(wù)，這就是我做組件的原則。
效果如下圖：
這里演示了三種不一樣的效果.
1.loading效果顯示在按鈕自己身上，這是極好的
2.loading效果顯示在其他dom上，
3.loading全屏顯示，不明覺厲.
實(shí)例demo演示請點(diǎn)擊這里http://www.lovewebgames.com/jsmodule/loading.html
github托管源碼請點(diǎn)擊這里https://github.com/tianxiangbing/loading
html:
<p> <input type="button" id="loading1" value="loading我自己"> <input type="button" id="loading2" value="loading下面這個(gè)div"> <input type="button" id="loading3" value="loading全屏"></p><div id="loading-content" style="width:300px;height:200px;border:1px solid #ccc;background-color:#f2f2f2;">這是個(gè)內(nèi)容的例子</div><script src="../src/jquery-1.11.2.js"></script><script src="../src/loading.js"></script>
js:
//loading我自己$('#loading1').click(function(){ var load = new Loading(); load.init({ target: this }); load.start(); setTimeout(function() { load.stop(); }, 3000)});//loading下面這個(gè)div$('#loading2').click(function(){ var load = new Loading(); load.init({ target: "#loading-content" }); load.start(); setTimeout(function() { load.stop(); }, 3000)});//loading全屏$('#loading3').click(function(){ var load = new Loading(); load.init(); load.start(); setTimeout(function() { load.stop(); }, 30000)});
需要顯示loading的節(jié)點(diǎn)，不傳值時(shí)顯示全屏的loading
開始loading
結(jié)束loading
target的stop事件觸發(fā)時(shí)，結(jié)束loading. 如$('html').trigger('stop')會結(jié)束全屏的loading動(dòng)畫.
新聞熱點(diǎn)
疑難解答
圖片精選
