用jQuery做页面预加载

版权声明:本文纯属原创,未经同意请勿转载。 https://blog.csdn.net/beiluo77/article/details/88261042

用jQuery做页面预加载

       在网页加载之前出现如进度条这一类的小动画是一种很好看的特效,使用jQuery可以很方便的做出这种效果。
我在这里使用的是

$(selector).animate(styles,speed,easing,callback)

这个语句
其中,1、style就是CSS的样式,比如margin,width
2、speed指的是:规定动画的速度。默认是 “normal”,同样的,它的值也和hide()
这些函数中的speed相同,可能的值有 毫秒 (比如 1500),“slow”,“normal”,"fast"
3、easing规定在不同的动画点中设置动画速度的 easing 函数,内置的 easing 函数有swing,linear等
4、callback是指animate 函数执行完之后,要执行的函数

$({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");//完成,隐藏进度条
            $(".container").show();
        }
    }
});

以上是我的jQuery代码(要记得引入jQuery.js)

h5代码很简单,定义一个简单进度条,进度条完成后显示页面,该页面我用一张图片代表

<div id="progress">
	
</div>
<div class="container">
	<img src="img/3.jpg" />
</div>

接下来是CSS代码,调整图片等的位置

body { 
	margin: 0;
	background: #000000;
}
#progress { 
	position: absolute; 
	top: 50%;
	height: 2px; 
	background: red; 
	transition: opacity 500ms linear;
}
#progress.done { opacity: 0 }
.container{
	display: none;
}

html和css里面的代码都比较随性,可以随意改动,做出其他一些好看的动效出来。
最后放上效果图,简单的页面预加载就完成了
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/beiluo77/article/details/88261042
0条评论
添加一条新回复