changzheng
/
changzheng-H5
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改

master
Email 3 years ago
parent
e57200bf7e
commit
0a5f7f4772
18 changed files with 170 additions and 39 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      begin.html
  2. 28
      css/game1.css
  3. 11
      css/game2.css
  4. 11
      css/game3.css
  5. 1
      css/game4.css
  6. 16
      css/game5.css
  7. 20
      css/index.css
  8. 27
      game1.html
  9. 24
      game2.html
  10. 24
      game3.html
  11. 15
      game4.html
  12. 19
      game5.html
  13. BIN
      img/game5/allWin.png
  14. BIN
      img/game5/sure.png
  15. BIN
      img/leftIcon.png
  16. BIN
      img/rightIcon.png
  17. 2
      index.html
  18. 9
      success.html

2
begin.html
View File

@ -119,7 +119,7 @@
<li> <li>
<p class="tips">活动时间：</p> <p class="tips">活动时间：</p>
<div class="contText"> <div class="contText">
2021年X月X日 10：00 — 2021年X月X日 23：59
2021年7月1日 — 2021年7月15日
</div> </div>
</li> </li>
<li> <li>

28
css/game1.css
View File

@ -5,6 +5,16 @@
.game1Index p.bgm img{ .game1Index p.bgm img{
width: 100%; width: 100%;
height: 100%; height: 100%;
}
.game1Index p.bgm img:nth-child(1){
opacity: 1;
}
.game1Index p.bgm img:nth-child(2){
opacity: 0;
position: absolute;
left: 0;
top: 0;
} }
.game1Index .imgList li{ .game1Index .imgList li{
width: 1.21rem; width: 1.21rem;
@ -75,6 +85,7 @@
top: 0; top: 0;
background: url(../img/game1/successBgm.png) no-repeat; background: url(../img/game1/successBgm.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
z-index: 99;
} }
.game1Index .maskBgm:after { .game1Index .maskBgm:after {
content: ""; content: "";
@ -106,17 +117,30 @@
width: 100%; width: 100%;
height: 1.66rem; height: 1.66rem;
z-index:-1 ; z-index:-1 ;
}
.game1Index div.line div{
margin: 0 auto;
width: 11rem;
height: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.game1Index div.line p{ .game1Index div.line p{
box-sizing: border-box; box-sizing: border-box;
padding: 0 1.15rem;
font-size: .44rem; font-size: .44rem;
font-weight: 400; font-weight: 400;
color: #C9C6BA; color: #C9C6BA;
opacity: 0.41;
}
div.line p{
width: .42rem;
height: .4rem;
font-size: 0;
}
div.line p img{
width: 100%;
height: 100%;
} }
.game1Index div.closeIcon{ .game1Index div.closeIcon{
display: flex; display: flex;

11
css/game2.css
View File

@ -82,6 +82,7 @@
top: 0; top: 0;
background: url(../img/game2/successBgm.png) no-repeat; background: url(../img/game2/successBgm.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
z-index: 99;
} }
.game2Index .maskBgm:after { .game2Index .maskBgm:after {
content: ""; content: "";
@ -117,13 +118,19 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.game2Index div.line div{
margin: 0 auto;
width: 11rem;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.game2Index div.line p{ .game2Index div.line p{
box-sizing: border-box; box-sizing: border-box;
padding: 0 1.15rem;
font-size: .44rem; font-size: .44rem;
font-weight: 400; font-weight: 400;
color: #C9C6BA; color: #C9C6BA;
opacity: 0.41;
} }
.game2Index div.closeIcon{ .game2Index div.closeIcon{
display: flex; display: flex;

11
css/game3.css
View File

@ -70,6 +70,7 @@
top: 0; top: 0;
background: url(../img/game3/successBgm.png) no-repeat; background: url(../img/game3/successBgm.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
z-index: 99;
} }
.game3Index .maskBgm:after { .game3Index .maskBgm:after {
content: ""; content: "";
@ -105,13 +106,19 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.game3Index div.line div{
margin: 0 auto;
width: 11rem;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.game3Index div.line p{ .game3Index div.line p{
box-sizing: border-box; box-sizing: border-box;
padding: 0 1.15rem;
font-size: .44rem; font-size: .44rem;
font-weight: 400; font-weight: 400;
color: #C9C6BA; color: #C9C6BA;
opacity: 0.41;
} }
.game3Index div.closeIcon{ .game3Index div.closeIcon{
display: flex; display: flex;

1
css/game4.css
View File

@ -79,6 +79,7 @@
top: 0; top: 0;
background: url(../img/game2/successBgm.png) no-repeat; background: url(../img/game2/successBgm.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
z-index: 99;
} }
.game4Index .maskBgm:after { .game4Index .maskBgm:after {
content: ""; content: "";

16
css/game5.css
View File

@ -76,6 +76,7 @@
top: 0; top: 0;
background: url(../img/game5/successBgm.png) no-repeat; background: url(../img/game5/successBgm.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
z-index: 99;
} }
.game5Index .maskBgm:after { .game5Index .maskBgm:after {
content: ""; content: "";
@ -206,3 +207,18 @@
} }
.game5Index .successBox {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 9.53rem;
height: 5.83rem;
background: url(../img/game5/allWin.png) no-repeat;
background-size: 100% 100%;
/*display: flex;*/
justify-content: center;
align-items: flex-end;
display: none;
z-index: 99;
}

20
css/index.css
View File

@ -220,4 +220,22 @@ p.bgm {
background: rgba(0,0,0,.5); background: rgba(0,0,0,.5);
z-index: 999999; z-index: 999999;
border-radius: 5px;*/ border-radius: 5px;*/
}
}
p.bgm img{
width: 100%;
height: 100%;
}
p.bgm img:nth-child(1){
opacity: 1;
}
p.bgm img:nth-child(2){
opacity: 0;
position: absolute;
left: 0;
top: 0;
}
.textList{
transition: all 1s linear;
}

27
game1.html
View File

@ -1,6 +1,9 @@
<link rel="stylesheet" type="text/css" href="css/game1.css" /> <link rel="stylesheet" type="text/css" href="css/game1.css" />
<div class="game1Index"> <div class="game1Index">
<p class="bgm"><img src="img/game1/bgm.png" /></p>
<p class="bgm">
<img src="img/game1/bgm.png" />
<img src="img/game1/successBgm.png" />
</p>
<div class="box_wrap"> <div class="box_wrap">
<ul class="imgList"> <ul class="imgList">
<li><img style="width: .96rem;" src="img/game1/lin1.png" /> <li><img style="width: .96rem;" src="img/game1/lin1.png" />
@ -26,9 +29,10 @@
</div> </div>
<div class="book_box"> <div class="book_box">
<div class="line"> <div class="line">
<p class="leftIcon">
< </p>
<p class="rightIcon"> > </p>
<div>
<p class="leftIcon"><img src="img/leftIcon.png"/> </p>
<p class="rightIcon"> <img src="img/rightIcon.png"/> </p>
</div>
</div> </div>
<div class="closeIcon"><img src="img/close.png" /></div> <div class="closeIcon"><img src="img/close.png" /></div>
<div class="bookCont"> <div class="bookCont">
@ -60,7 +64,7 @@
<!--下一关--> <!--下一关-->
<div class="successBox"> <div class="successBox">
<!--<div class="shut"><img src="img/close.png" /></div>--> <!--<div class="shut"><img src="img/close.png" /></div>-->
<p class="above"><img src="img/aboveIcon.png" /></p>
<!--<p class="above"><img src="img/aboveIcon.png" /></p>-->
<p class="next game1Next"><img src="img/nextIcon.png" /></p> <p class="next game1Next"><img src="img/nextIcon.png" /></p>
</div> </div>
</div> </div>
@ -159,14 +163,21 @@
if(num == 3) { if(num == 3) {
console.log('成功') console.log('成功')
setTimeout(function() { setTimeout(function() {
$('.game1Index p.bgm img').attr('src', 'img/game1/successBgm.png')
// $('.game1Index p.bgm img').attr('src', 'img/game1/successBgm.png')
$('.game1Index p.bgm img').eq(0).animate({
'opacity':'0'
},1000)
$('.game1Index p.bgm img').eq(1).animate({
'opacity':'1',
'z-index':'99'
},1000)
$('.game1Index .box_wrap').fadeOut(); $('.game1Index .box_wrap').fadeOut();
}, 1500) }, 1500)
setTimeout(function() { setTimeout(function() {
$('.game1Index .book_box').fadeIn() $('.game1Index .book_box').fadeIn()
$('.game1Index .maskBgm').fadeIn()
}, 2500)
$('.game1Index .maskBgm').fadeIn(1000)
}, 3500)
} }
} }
$('.game1Next').click(function(){ $('.game1Next').click(function(){

24
game2.html
View File

@ -1,6 +1,9 @@
<link rel="stylesheet" type="text/css" href="css/game2.css" /> <link rel="stylesheet" type="text/css" href="css/game2.css" />
<div class="game2Index"> <div class="game2Index">
<p class="bgm"><img src="img/game2/game2Bgm.png" /></p>
<p class="bgm">
<img src="img/game2/game2Bgm.png" />
<img src="img/game2/successBgm.png"/>
</p>
<div class="box_wrap"> <div class="box_wrap">
<ul class="imgList"> <ul class="imgList">
<li><img style="width: .96rem;" src="img/game2/lin1.png" /> <li><img style="width: .96rem;" src="img/game2/lin1.png" />
@ -26,9 +29,10 @@
</div> </div>
<div class="book_box"> <div class="book_box">
<div class="line"> <div class="line">
<p class="leftIcon">
< </p>
<p class="rightIcon"> > </p>
<div>
<p class="leftIcon"><img src="img/leftIcon.png"/> </p>
<p class="rightIcon"> <img src="img/rightIcon.png"/> </p>
</div>
</div> </div>
<div class="closeIcon"><img src="img/close.png" /></div> <div class="closeIcon"><img src="img/close.png" /></div>
<div class="bookCont"> <div class="bookCont">
@ -158,14 +162,20 @@
if(num2 == 3) { if(num2 == 3) {
console.log('成功') console.log('成功')
setTimeout(function() { setTimeout(function() {
$('.game2Index p.bgm img').attr('src', 'img/game2/successBgm.png')
$('.game2Index p.bgm img').eq(0).animate({
'opacity':'0'
},1000)
$('.game2Index p.bgm img').eq(1).animate({
'opacity':'1',
'z-index':'99'
},1000)
$('.game2Index .box_wrap').fadeOut(); $('.game2Index .box_wrap').fadeOut();
}, 1500) }, 1500)
setTimeout(function() { setTimeout(function() {
$('.game2Index .book_box').fadeIn() $('.game2Index .book_box').fadeIn()
$('.game2Index .maskBgm').fadeIn()
}, 2500)
$('.game2Index .maskBgm').fadeIn(1000)
}, 3500)
} }
} }
$('.game2Above').click(function(){ $('.game2Above').click(function(){

24
game3.html
View File

@ -1,6 +1,9 @@
<link rel="stylesheet" type="text/css" href="css/game3.css" /> <link rel="stylesheet" type="text/css" href="css/game3.css" />
<div class="game3Index"> <div class="game3Index">
<p class="bgm"><img src="img/game3/bgm.png" /></p>
<p class="bgm">
<img src="img/game3/bgm.png" />
<img src="img/game3/successBgm.png" />
</p>
<div class="box_wrap"> <div class="box_wrap">
<ul class="imgList"> <ul class="imgList">
<li><img style="width: .66rem;" src="img/game3/lin1.png" /> <li><img style="width: .66rem;" src="img/game3/lin1.png" />
@ -26,9 +29,10 @@
</div> </div>
<div class="book_box"> <div class="book_box">
<div class="line"> <div class="line">
<p class="leftIcon">
< </p>
<p class="rightIcon"> > </p>
<div>
<p class="leftIcon"><img src="img/leftIcon.png"/> </p>
<p class="rightIcon"> <img src="img/rightIcon.png"/> </p>
</div>
</div> </div>
<div class="closeIcon"><img src="img/close.png" /></div> <div class="closeIcon"><img src="img/close.png" /></div>
<div class="bookCont"> <div class="bookCont">
@ -157,14 +161,20 @@
if(num3 == 3) { if(num3 == 3) {
console.log('成功') console.log('成功')
setTimeout(function() { setTimeout(function() {
$('.game3Index p.bgm img').attr('src', 'img/game3/successBgm.png')
$('.game3Index p.bgm img').eq(0).animate({
'opacity':'0'
},1000)
$('.game3Index p.bgm img').eq(1).animate({
'opacity':'1',
'z-index':'99'
},1000)
$('.game3Index .box_wrap').fadeOut(); $('.game3Index .box_wrap').fadeOut();
}, 1500) }, 1500)
setTimeout(function() { setTimeout(function() {
$('.game3Index .book_box').fadeIn() $('.game3Index .book_box').fadeIn()
$('.game3Index .maskBgm').fadeIn()
}, 2500)
$('.game3Index .maskBgm').fadeIn(1000)
}, 3500)
} }
} }
$('.game3Above').click(function(){ $('.game3Above').click(function(){

15
game4.html
View File

@ -1,6 +1,9 @@
<link rel="stylesheet" type="text/css" href="css/game4.css" /> <link rel="stylesheet" type="text/css" href="css/game4.css" />
<div class="game4Index"> <div class="game4Index">
<p class="bgm"><img src="img/game4/game4Bgm.png" /></p>
<p class="bgm">
<img src="img/game4/game4Bgm.png" />
<img src="img/game4/successBgm.png" />
</p>
<div class="box_wrap"> <div class="box_wrap">
<ul class="imgList"> <ul class="imgList">
<li><img style="width: .96rem;" src="img/game4/lin1.png" /> <li><img style="width: .96rem;" src="img/game4/lin1.png" />
@ -172,13 +175,19 @@
if(num4 == 3) { if(num4 == 3) {
console.log('成功') console.log('成功')
setTimeout(function() { setTimeout(function() {
$('.game4Index p.bgm img').attr('src', 'img/game4/successBgm.png')
$('.game4Index p.bgm img').eq(0).animate({
'opacity':'0'
},1000)
$('.game4Index p.bgm img').eq(1).animate({
'opacity':'1',
'z-index':'99'
},1000)
$('.game4Index .box_wrap').fadeOut(); $('.game4Index .box_wrap').fadeOut();
}, 1500) }, 1500)
setTimeout(function() { setTimeout(function() {
$('.game4Index .book_box').fadeIn() $('.game4Index .book_box').fadeIn()
$('.game4Index .maskBgm').fadeIn()
$('.game4Index .maskBgm').fadeIn(1000)
video4.play() video4.play()
}, 3500) }, 3500)
} }

19
game5.html
View File

@ -1,6 +1,9 @@
<link rel="stylesheet" type="text/css" href="css/game5.css" /> <link rel="stylesheet" type="text/css" href="css/game5.css" />
<div class="game5Index"> <div class="game5Index">
<p class="bgm"><img src="img/game5/bgm.png" /></p>
<p class="bgm">
<img src="img/game5/bgm.png" />
<img src="img/game5/successBgm.png" />
</p>
<div class="box_wrap"> <div class="box_wrap">
<ul class="imgList"> <ul class="imgList">
<li><img style="width: .96rem;" src="img/game5/lin1.png" /> <li><img style="width: .96rem;" src="img/game5/lin1.png" />
@ -59,8 +62,8 @@
<!--下一关--> <!--下一关-->
<div class="successBox"> <div class="successBox">
<!--<div class="shut"><img src="img/close.png" /></div>--> <!--<div class="shut"><img src="img/close.png" /></div>-->
<p class="above game5Above"><img src="img/aboveIcon.png" /></p>
<p class="next game5Next"><img src="img/nextIcon.png" /></p>
<!--<p class="above game5Above"><img src="img/aboveIcon.png" /></p>-->
<p class="next game5Next"><img src="img/game5/sure.png" /></p>
</div> </div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
@ -169,13 +172,19 @@ var video5 = document.getElementById("video5");
if(num5 == 3) { if(num5 == 3) {
console.log('成功') console.log('成功')
setTimeout(function() { setTimeout(function() {
$('.game5Index p.bgm img').attr('src', 'img/game5/successBgm.png')
$('.game5Index p.bgm img').eq(0).animate({
'opacity':'0'
},1000)
$('.game5Index p.bgm img').eq(1).animate({
'opacity':'1',
'z-index':'99'
},1000)
$('.game5Index .box_wrap').fadeOut(); $('.game5Index .box_wrap').fadeOut();
}, 1500) }, 1500)
setTimeout(function() { setTimeout(function() {
$('.game5Index .book_box').fadeIn() $('.game5Index .book_box').fadeIn()
$('.game5Index .maskBgm').fadeIn()
$('.game5Index .maskBgm').fadeIn(1000)
video5.play() video5.play()
}, 3500) }, 3500)
} }

BIN
img/game5/allWin.png
View File

Before After
Width: 953  |  Height: 583  |  Size: 232 KiB

BIN
img/game5/sure.png
View File

Before After
Width: 245  |  Height: 83  |  Size: 11 KiB

BIN
img/leftIcon.png
View File

Before After
Width: 200  |  Height: 200  |  Size: 4.9 KiB

BIN
img/rightIcon.png
View File

Before After
Width: 200  |  Height: 200  |  Size: 4.9 KiB

2
index.html
View File

@ -62,7 +62,7 @@
</html> </html>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script> <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script> <script>
alert('请横屏使用！')
alert('建议横屏使用！')
$("#begin").load("begin.html"); $("#begin").load("begin.html");
$("#game1").load("game1.html"); $("#game1").load("game1.html");
// $("#game2").load("game2.html"); // $("#game2").load("game2.html");

9
success.html
View File

@ -14,6 +14,10 @@
left: 50%; left: 50%;
top:50%; top:50%;
transform: translate(-50%,-50%); transform: translate(-50%,-50%);
overflow: hidden;
}
.sucIndex .shi img{
margin-left: -6.35rem;
} }
</style> </style>
<div class="sucIndex"> <div class="sucIndex">
@ -24,3 +28,8 @@
</div> </div>
</div> </div>
<script type="text/javascript">
$('.shi img').animate({
'margin-left':'0'
},8000)
</script>
Write Preview
Loading…
Cancel
Save