一月 6, 2016 | 前端與Vue
利用JQuery寫出loading完成後執行開門效果
<p>開始之前,我們來先看一下效果<a href="http://bonze.tw/demo/load_open/" target="_blank">demo</a></p>
<p>首先在head中引入jquery</p>
開始之前,我們來先看一下效果demo
首先在head中引入jquery
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
接著在</body>前寫入
<script type="text/javascript">
$('body').after("<div class='spinner-wrap'><div class='leftside'/><div class='rightside'/><div class='spinner'><div class='bounce1'/><div class='bounce2'/><div class='bounce3'/></div></div>")
//在body下新增div
</script>
<script type="text/javascript">
var loaded = false;//宣告一個laoded =false
function hide_loader() {
if (!loaded) { //true
$('body').css('overflow', 'visible');
$(".leftside").stop().css('width', '0px');//loading完成對.leftside執行
$(".rightside").stop().css('width', '0px');//loading完成對.rightside執行
$('.spinner').stop().css('top', '-1000px');
$('.spinner-wrap').fadeOut(1000, function () {//fadeOut後接著在HTML裡面刪除這個div
$(this).remove()
});
loaded = true
}
}
setTimeout(function () {
hide_loader()
},
10000);
$(window).load(function () {//loading時執行這個function
hide_loader()
});
</script>
接著再到CSS裡面寫入
<style> .leftside { position:absolute; left:0; width:50%; height:100%; background:#e74b3b; -webkit-transition: all 1.5s; -moz-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s; } /*左邊全屏 寬度50%*/ .rightside { position:absolute; right:0; width:50%; height:100%; background:#e74b3b; -webkit-transition: all 1.5s; -moz-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s; } /*右邊全屏 寬度50%*/ </style>
會出現這種收起來的效果主要是因為寬度從50%到0px之前有一個過渡效果唷。
所以-webkit-transition: all 1.5s;
-moz-transition: all 1.5s;
-o-transition: all 1.5s;
transition: all 1.5s;
*這一段屬性是必要的唷