为了账号安全,请及时绑定邮箱和手机立即绑定

老师好,我想实现页面的转换更好看一点

以下是代码,这里实现的是锚链接,我想就要一般的链接也有一个缓冲效果怎么做呢?今天刚刚看了一点您讲的课,感觉蛮好的,就是这里我不知道怎么做,请快点回复我好吗?


<!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>


正在回答

举报

0/150
提交
取消

老师好,我想实现页面的转换更好看一点

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信