You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.5 KiB
93 lines
2.5 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>重走长征路</title>
|
|
<meta name="keywords" content="keyword1,keyword2,keyword3">
|
|
<meta name="description" content="this is my page">
|
|
<meta name="content-type" content="text/html; charset=UTF-8">
|
|
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
|
|
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="js/style.js" type="text/javascript" charset="utf-8"></script>
|
|
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/index.css" />
|
|
</head>
|
|
<body>
|
|
<div id="wrap">
|
|
|
|
<!--加载页-->
|
|
<div class="loading">
|
|
<img src="img/loading.png" class="load" />
|
|
<!--进度条-->
|
|
<div class="flex-center">
|
|
<h3>加载中...</h3>
|
|
<span class="container">
|
|
<span id="progressBar" class="h-100P bar"><text></text></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!--开始页-->
|
|
<div class="begin">
|
|
<div id="begin"></div>
|
|
</div>
|
|
<!--第一关-->
|
|
<div class="firstGame">
|
|
<div id="game1"></div>
|
|
</div>
|
|
<!--第二关-->
|
|
<div class="secondGame">
|
|
<div id="game2"></div>
|
|
</div>
|
|
<!--第三关-->
|
|
<div class="thirdGame">
|
|
<div id="game3"></div>
|
|
</div>
|
|
<!--第四关-->
|
|
<div class="fourGame">
|
|
<div id="game4"></div>
|
|
</div>
|
|
<!--第五关-->
|
|
<div class="fiveGame">
|
|
<div id="game5"></div>
|
|
</div>
|
|
<!--成功-->
|
|
<div class="win">
|
|
<div id="success"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
|
|
<script>
|
|
alert('建议横屏使用！')
|
|
$("#begin").load("begin.html");
|
|
$("#game1").load("game1.html");
|
|
// $("#game2").load("game2.html");
|
|
// $("#game3").load("game3.html");
|
|
// $("#game4").load("game4.html");
|
|
// $("#game5").load("game5.html");
|
|
// $("#success").load("success.html");
|
|
$(document).ready(function() {
|
|
//进度条
|
|
var percentage = 0;
|
|
var interval = setInterval(function() {
|
|
if(percentage < 500) {
|
|
percentage++;
|
|
var widthTemp = (percentage / 5).toFixed(1) + '%';
|
|
$('#progressBar').css('width', widthTemp);
|
|
} else {
|
|
clearInterval(interval);
|
|
setTimeout(function() {
|
|
clearInterval(interval)
|
|
$('.flex-center').fadeOut(10)
|
|
// $('.begin').fadeIn(100)
|
|
$('.load').attr('src','img/begin.png')
|
|
$('.begin').css('display','block')
|
|
}, 500);
|
|
}
|
|
}, 10);
|
|
});
|
|
</script>
|