jiandangbainian
/
jiandangbainian-new
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

111

master
Email 3 years ago
parent
1c5ebc0848
commit
cd33017e31
7 changed files with 99 additions and 12 deletions
Unified View
  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
View File

@ -73,7 +73,7 @@ li {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
z-index: 99999; z-index: 9999;
/*display: none;*/ /*display: none;*/
opacity: 0; opacity: 0;
} }
@ -192,4 +192,36 @@ li {
.bookImg .btn1 p.active { .bookImg .btn1 p.active {
background: #E40006; 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
View File

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

1
css/game5.css
View File

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

6
game4.html
View File

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

4
game5.html
View File

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

BIN
img/gjIcon.png
View File

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

59
index.html
View File

@ -8,10 +8,7 @@
<meta name="description" content="this is my page"> <meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8"> <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"> <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/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> <script src="js/comment.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/style.css" />
@ -97,15 +94,14 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
animation: dialoganimate 1s linear 4s; /*animation: dialoganimate 1s linear 4s;*/
} }
.dialog p { .dialog p {
font-size: .96rem; font-size: .96rem;
font-family: '楷体'; font-family: '楷体';
} }
/*@keyframes dialoganimate {
@keyframes dialoganimate {
0% { 0% {
opacity: 1; opacity: 1;
} }
@ -113,6 +109,7 @@
opacity: 0.8; opacity: 0.8;
} }
} }
*/
.logo { .logo {
position: absolute; position: absolute;
@ -126,6 +123,11 @@
<body> <body>
<div id="wrap"> <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> --> <!-- <canvas id="c"></canvas> -->
<img src="./img/5.jpg" class="firstimg" alt=""> <img src="./img/5.jpg" class="firstimg" alt="">
<img src="./img/logo.png" class="logo" alt=""> <img src="./img/logo.png" class="logo" alt="">
@ -156,8 +158,6 @@
</div> </div>
<script> <script>
$(document).ready(function() { $(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] 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, 'width': width,
'height': height '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') $(".firstimg").addClass('imganimat')
setTimeout(function() { setTimeout(function() {
$(".firstimg").css({ $(".firstimg").css({
@ -322,7 +362,8 @@
}, 4000) }, 4000)
}, 11000) }, 11000)
}); }
//打乱方法 //打乱方法
function randArr(arr) { function randArr(arr) {

Write Preview
|||||||
100:0
Loading…
Cancel
Save