<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>页面加载特效（Page Loading Effects） | Demo 1</title>
<meta name="description" content="页面加载特效（Page Loading Effects）: " />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/snap.svg-min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://dreamsky.github.io/main/blog/common/init.css">
<script src="http://dreamsky.github.io/main/blog/common/jquery.min.js"></script>
<script src="http://dreamsky.github.io/main/blog/common/init.js"></script>
</head>
<body>
<div class="pagewrap" id = "pagewrap">
<div class="container show" id = "page-1">
<header class = "codrops-header" >
<h1 style="margin-top: 100px">页面记载特效（page loading effects）<span></span></h1>
</header>
<selection class = "columns clearfix">
<div class="column">
<nav class="codrops-demos">
<a href="index.html" class="current-demo">效果一</a>
<a href="index2.html">效果二</a>
<a href="index3.html">效果三</a>
<a href="index4.html">效果四</a>
<a href="index5.html">效果五</a>
<a href="index6.html">效果六</a>
<a href="index7.html">效果七</a>
<a href="index8.html">效果八</a>
<a href="index9.html">效果九</a>
<a href="index10.html">效果十</a>
<a href="index11.html">效果十一</a>
<a href="index12.html">效果十二</a>
<a href="index13.html">效果十三</a>
</nav>
</div>
<div class="column">
<p></p>
<p><a class="pageload-link" href="#page-2">点击预览效果</a></p>
</div>
</selection>
<div class="footer-banner" style="width: 728px;margin: 30px auto"></div>
</div>
<div class="container" id = "page-2">
<selection>
<h2>这是一个实例页面。</h2>
<p><a class="pageload-link" href="#page-1">返回</a></p>
</selection>
</div>
<div id="loader" class="pageload-overlay" data-opening="M20,15 50,30 50,30 30,30 Z;M0,0 80,0 50,30 20,45 Z;M0,0 80,0 60,45 0,60 Z;M0,0 80,0 80,60 0,60 Z"
data-closing="M0,0 80,0 60,45 0,60 Z;M0,0 80,0 50,30 20,45 Z;M20,15 50,30 50,30 30,30 Z;M30,30 50,30 50,30 30,30 Z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
<path d="M30,30 50,30 50,30 30,30 Z"/>
</svg>
</div>
</div>
<script src="js/classie.js"></script>
<script src = "js/svgloder.js"></script>
<script>
(function(){
var pageWrap = document.getElementById("pagewrap"),
pages = [].slice.call(pageWrap.querySelectorAll(‘div.container‘)),
currentPage = 0,
triggerLoading = [].slice.call(pageWrap.querySelectorAll(‘a.pageload-link‘)),
loader = new SVGLoder(document.getElementById(‘loader‘),{speedIn:100});
function init(){
triggerLoading.foreach(function(trigger){
trigger.addEventListener(‘click‘,function(ev){
ev.preventDefault();
loader.show();
setTimeout(function(){
loader.hide();
classie.removeClass(page[currentPage],‘show‘);
currentPage = currentPage?0:1;
classie.addClass(page[currentPage],‘show‘);
},2000);
});
});
}
init();
})();
</script>
</body>
</html>
/********************classie.js********************/
(function (window){
‘use strict‘;
function classReg(className){
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
var hasClass,addClass,removeClass;
if("classList" in document.documentElement){
hasClass = function(elem,c){
return elem.classList.contains(c);
}
addClass = function(elem,c){
elem.classList.add(c);
}
removeClass = function(elem,c){
elem.classList.remove(c);
}
}
else{
hasClass = function(elem,c){
return classReg(c).test(elem.className);
};
addClass = function(elem,c){
if(!hasClass(elem,c)){
elem.className = elem.className + "" + c;
}
};
removeClass = function(elem,c){
elem.className = elem.className.replace(classReg(c),‘‘)
};
}
function toggleClass(elem,c){
var fn = hasClass(elem,c)?removeClass:addClass;
fn(elem,c);
}
var classie = {
hasClass : hasClass,
addClass : addClass,
removeClass : removeClass,
toggleClass : toggleClass,
has : hasClass,
add : addClass,
remove : removeClass,
toggle : toggleClass
};
if(typeof define === ‘function‘ && define.amd ){
define(classie);
}else{
window.classie = classie;
}
})(window);
原文：http://www.cnblogs.com/whatcanido/p/5180807.html