几行代码做出引导页效果
Posted 萌新北笙
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了几行代码做出引导页效果相关的知识，希望对你有一定的参考价值。
完整代码：
<html>
<head>
<meta charset="UTF-8">
<title>引导页演示</title>
<script src="js/jquery.min.js"></script><!--引用jq-->
<style>
#ydy{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
background: url(img/ydy.png) 0% 0% /100% 100% no-repeat; /*引用引导页图片*/
}
</style>
</head>
<body>
<div id="ydy" style="display: none;">
<button type="button" style="float:right;color: #6c757d;border-color: #6c757d;" id="btn1">跳过</button>
</div>
<script>
window.onload =function(){
$('#ydy').show();
btn1.onclick=function(){
$('#ydy').hide();
window.location.href="index.php";
}
setTimeout(function() {
$('#ydy').hide();
window.location.href="index.php";
}, 5000);
}
</script>
</body>
</html>
按钮样式没写有点丑，各位看官可自行修改。
以上是关于几行代码做出引导页效果的主要内容，如果未能解决你的问题，请参考以下文章