老师好,我想实现页面的转换更好看一点
以下是代码,这里实现的是锚链接,我想就要一般的链接也有一个缓冲效果怎么做呢?今天刚刚看了一点您讲的课,感觉蛮好的,就是这里我不知道怎么做,请快点回复我好吗?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <meta http-equiv="refresh"content="1;url=http://www.baidu.com"> -->
<title>页面加载特效</title>
<link rel="stylesheet" type="text/css" href="page-load/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="page-load/css/demo.css" />
<link rel="stylesheet" type="text/css" href="page-load/css/component.css" />
<script src="page-load/js/snap.svg-min.js"></script>
<script src="page-load/js/classie.js"></script>
<script src="page-load/js/svgLoader.js"></script>
<script>
function init() {
var pageWrap = document.getElementById( 'pagewrap' ),
pages = [].slice.call( pageWrap.querySelectorAll( 'div.container' ) ),
currentPage = 0,
triggerLoading = [].slice.call( pageWrap.querySelectorAll( 'a.pageload-link' ) ),
loader = new SVGLoader( document.getElementById( 'loader' ), { speedIn : 500, easingIn : mina.easeinout } );
triggerLoading.forEach( function( trigger ) {
trigger.addEventListener( 'click', function( ev ) {
ev.preventDefault();
loader.show();
// after some time hide loader
setTimeout( function() {
loader.hide();
classie.removeClass( pages[ currentPage ], 'show' );
// update..
currentPage = currentPage ? 0 : 1;
classie.addClass( pages[ currentPage ], 'show' );
}, 2000 );
} );
} );
}
</script>
</head>
<body>
<div id="pagewrap">
<div class="container show" id="page-1">
<div>
<a href="#page-2"onclick="init()">点击预览效果</a>
</div>
</div>
<div id="page-2">
<section>
<h2>这是一个示例页面.</h2>
<p><a href="#page-1">返回</a></p>
</section>
</div>
<div id="loader" data-opening="M 40,-65 145,80 -65,80 40,-65" data-closing="m 40,-65 0,0 L -65,80 40,-65">
<svg width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
<path d="M 40,-65 145,80 40,-65"/>
</svg>
</div>
</div>
</body>
</html>