Email 3 years ago
parent
commit
cd33017e31
7 changed files with 99 additions and 12 deletions
  1. 36
      css/begin.css
  2. 5
      css/game4.css
  3. 1
      css/game5.css
  4. 6
      game4.html
  5. 4
      game5.html
  6. BIN
      img/gjIcon.png
  7. 59
      index.html

36
css/begin.css

@ -73,7 +73,7 @@ li {
position: absolute;
left: 0;
top: 0;
z-index: 99999;
z-index: 9999;
/*display: none;*/
opacity: 0;
}
@ -192,4 +192,36 @@ li {
.bookImg .btn1 p.active {
background: #E40006;
}
}
/*提示框*/
.maskBox{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background: #000;
opacity: 1;
z-index: 99999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
display: none;
}
.maskBox p{
color: #fff;
font-size: .4rem;
line-height: .8rem;
text-align: center;
}
.maskBox p.gjIcon{
width: 1.5rem !important;
height: 1.5rem !important;
margin-top: 1rem;
}
.maskBox p.gjIcon img{
width: 100% !important;
height: 100% !important;
}

5
css/game4.css

@ -214,7 +214,10 @@
height: 1rem;
/*display: flex;*/
display: none;
/*justify-content: flex-end;*/
position: absolute;
bottom: 0;
right: 50%;
transform: translateX(50%);
}
.contList ul li{
/*flex: 1;*/

1
css/game5.css

@ -197,6 +197,7 @@
position: absolute;
bottom: 15%;
right: 0;
font-size: 0;
}
.nextBtn img {

6
game4.html

@ -314,6 +314,7 @@
$('.tipList>ul>li').eq(trueNums).find('.time').attr('id', 'dataNums');
$('.contList ').on('touchstart', 'li', function(e) {
console.log(e)
$(this).find('p').css("transform",'scale(.8)')
var idIndex = e.currentTarget.dataset.id;
for(var i = 0; i <= timeArrNew.length; i++) {
@ -452,12 +453,17 @@
}
} else {
var falseAudio = document.getElementById('falseAudio');
falseAudio.play();
audioAutoPlay('falseAudio')
//
}
}).on('touchend',function(e){
console.log($(this).index())
$(this).find('p').css("transform",'scale(1)')
})
function randArr(arr) {

4
game5.html

@ -339,6 +339,7 @@
}
})
$('.nextBtn').on('touchstart', function() {
$('.nextBtn').css({'transform':'scale(.9)','right':'-5px'})
clickState = true;
chooseIndex = null;
$('.sureBtn').fadeIn();
@ -356,6 +357,9 @@
'background-size': '100% 100%',
})
}).on('touchend',function(e){
$('.nextBtn').css({'transform':'scale(1)','right':'0px'})
})
function end() {

BIN
img/gjIcon.png

Before After
Width: 140  |  Height: 140  |  Size: 17 KiB

59
index.html

@ -8,10 +8,7 @@
<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/comment.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
@ -97,15 +94,14 @@
display: flex;
justify-content: center;
align-items: center;
animation: dialoganimate 1s linear 4s;
/*animation: dialoganimate 1s linear 4s;*/
}
.dialog p {
font-size: .96rem;
font-family: '楷体';
}
@keyframes dialoganimate {
/*@keyframes dialoganimate {
0% {
opacity: 1;
}
@ -113,6 +109,7 @@
opacity: 0.8;
}
}
*/
.logo {
position: absolute;
@ -126,6 +123,11 @@
<body>
<div id="wrap">
<div class="maskBox">
<p>请打开手机工具栏</p>
<p>点亮“禁止屏幕转动”功能后开始浏览</p>
<p class="gjIcon"><img src="img/gjIcon.png" style="width: 100%;height: 100%;" /></p>
</div>
<!-- <canvas id="c"></canvas> -->
<img src="./img/5.jpg" class="firstimg" alt="">
<img src="./img/logo.png" class="logo" alt="">
@ -156,8 +158,6 @@
</div>
<script>
$(document).ready(function() {
//翻书数组
var contIndex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 19, 17, 18, 19]
@ -228,6 +228,46 @@
'width': width,
'height': height
})
var browser = {
versions: function() {
var u = navigator.userAgent,
app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
var IOS = browser.versions.ios;
var ANDROID = browser.versions.android;
if(IOS) {
// iOS手机
$('.maskBox').css('display','flex')
$('.maskBox').fadeOut(5500)
setTimeout(function(){
timeDown()
},5500)
} else if(ANDROID) {
// Android手机
timeDown()
}
});
function timeDown() {
$(".firstimg").addClass('imganimat')
setTimeout(function() {
$(".firstimg").css({
@ -322,7 +362,8 @@
}, 4000)
}, 11000)
});
}
//打乱方法
function randArr(arr) {

Loading…
Cancel
Save