为了加强浏览者的体验,不在等待页面加载时感到枯燥，从而关闭网页，很多网站都会制作一个“网页正在加载中”的提示效果或显示加载进程，加载完成后提示消失，大部分都应用在网站的首页，今天我教大家把这一特效添加到Emlog主题中。

1.首先在header.php文件中的body开始之前加上如下代码：

<div id="preloader">
	<div id="loader"></div>
</div>

2.再加一段判断状态JS

<script type="text/javascript">
	window.onload = function() {
	document.getElementById("preloader").style.display = "none";
	document.getElementById("loader").style.display = "none";
	}
</script>

3.在</head>标签结束之前加css样式

<style>
#preloader {
	z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #9370DB;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

教程

使用jquery实现加载特效

1.在模板header.php文件中加载加载jquery.js，现在的主题一般都会有

    <?php echo BLOG_URL;?>include/lib/js/jquery/jquery-1.7.1.js

第二步：在前添加一段JS代码

    <script type="text/javascript">
    jQuery(function(){
    jQuery('#loading-one').empty().append('页面加载完毕.').parent().fadeOut('slow');
    });</script>

第三步：在后添加显示效果样式

    <div id="loading" style="position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000 url(这里输入一个图片地址) no-repeat center; opacity:0.6; filter:alpha(opacity=60);font-size:14px;line-height:20px;" onclick="javascript:turnoff('loading')">
    <p id="loading-one" style="color:#fff;position:absolute; top:50%; left:50%; margin:50px 0 0 -50px; padding:3px 10px;" onclick="javascript:turnoff('loading')">页面载入中,请稍后...</p>
    </div>

图片大小格式不限，不加图片也可以，到此该特效添加完毕。

分享到：

打赏 生成海报