|
|
<link rel="stylesheet" type="text/css" href="css/game5.css" /><div class="game5Index"> <p class="bgm"> <img src="img/game5/bgm.png" /> <img src="img/game5/successBgm.png" /> </p> <div class="box_wrap"> <ul class="imgList"> <li><img style="width: .96rem;" src="img/game5/lin1.png" /> <p></p> </li> <li><img style="width: .92rem;" src="img/game5/lin2.png" /> <p></p> </li> <li><img style="width: .94rem;" src="img/game5/lin3.png" /> <p></p> </li> <!--<li></li>
<li></li> <li></li>--> </ul> <div class="clickIcon"> <ul> <li class="click1 click"><img src="img/game5/icon1.png"/></li> <li class="click2 click"><img src="img/game5/icon2.png"/></li> <li class="click3 click"><img src="img/game5/icon3.png"/></li> </ul> </div> </div> <div class="book_box"> <div class="line"> <p class="leftIcon"> < </p> <p class="rightIcon"> > </p> </div> <div class="closeIcon"><img src="img/close.png" /></div> <div class="bookCont"> <div class="leftImg"> <div class="titleTip"> <p>九个炊事员</p> <p class="img"><img src="img/img2.png" /></p> </div> <div class="imgList"> <img src="img/game4.png" /> </div> </div> <div class="rightCont"> <div class="titleTip"> <h2>故事原型</h2> <h5>九个炊事员</h5> </div> <ul class="textList"> <video width="210" height="150" style="object-fit: fill;" id="video5" controls="controls"> <source src="img/video/game5.mp4" type="video/mp4"></source> </video> </ul> <!--<p class="pageNum"><text>1</text>/<span>5</span></p>--> </div> </div> </div> <div class="maskBgm"></div> <!--下一关--> <div class="successBox"> <!--<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/game5/sure.png" /></p> </div></div><script type="text/javascript"> var num5 = [];// var contList5 = [// '飞夺泸定桥：1935年5月，北上抗日的红军向天险大渡河挺进。大渡河水流湍急，两岸都是高山峻岭，只有一座铁索桥可以通过。这座铁索桥，就是红军北上必须夺取的泸定桥。国民党反动派派了两个团防守泸定桥，阻拦红军北上；后来又调了两个旅赶去增援，妄想把我红军消灭在桥头上。我军早就看穿了敌人的诡计。28日早上，红四团接到上级命令：“29日早晨夺下泸定桥！”时间只剩下20多个小时了',// '红四团离泸定桥还有240里。敌人的两个旅援兵正在对岸向泸定桥行进。抢在敌人前头，是我军战胜敌人的关键。红四团翻山越岭，沿路击溃了好几股阻击的敌人，到晚上7点钟，离泸定桥还有110里。战士们一整天没顾得上吃饭。天又下起雨来，把他们都淋透了。战胜敌人的决心使他们忘记了饥饿和疲劳。在漆黑的夜里，他们冒着雨，踩着泥水继续前进。忽然对岸出现了无数火把，像一条长蛇向泸定桥的',// '方向奔去，分明是敌人的增援部队。红四团的战士索性也点起火把，照亮了道路跟对岸的敌人赛跑。敌人看到了这边的火把，扯着嗓子喊：“你们是哪个部分的？”我们的战士高声答话：“是碰上红军撤下来的。”对岸的敌人并不疑心。两支军队像两条火龙，隔着大渡河走了二三十里。雨越下越猛，像瓢泼一样，把两岸的火把都浇灭了。对岸的敌人不能再走，只好停下来宿营。红四团仍旧摸黑冒雨前进，终于在',// '29日清晨赶到了泸定桥，把增援的两个旅的敌人抛在后面了。',// ]
// var liCont5 = '';// var pageNum5 = 1;// var total5= contList5.length// for(var i = 0; i <= contList5.length; i++) {// liCont5 += '<li>' + contList5[i] + '</i>'// }// $('.game5Index .textList').html(liCont5)// $('.game5Index .textList li').eq(0).show().siblings().hide()// $('.game5Index .pageNum span').text(total5)// $('.game5Index .pageNum text').text(pageNum5)//// $('.game5Index .leftIcon').click(function() {// if(pageNum5 > 1) {// pageNum5--;// $('.pageNum text').text(pageNum5)// $('.textList li').eq(pageNum5 - 1).show().siblings().hide()// }// })// $('.game5Index .rightIcon').click(function() {// if(pageNum5 < total5) {// pageNum5++;// $('.game5Index .pageNum text').text(pageNum5)// $('.game5Index .textList li').eq(pageNum5 - 1).show().siblings().hide()// }// if(pageNum5 == total5) {// setTimeout(function() {// $('.game5Index .book_box').fadeOut()// $('.game5Index .successBox').css('display', 'flex')// }, 1500)// }// })var video5 = document.getElementById("video5"); video5.loop = false; video5.addEventListener('ended', function () { $('.book_box').fadeOut() $('.successBox').css('display', 'flex') //监听到播放结束后，在此处可调用自己的接口 console.log('播放完毕5')
}, false); $('.game5Index .click1').click(function() { $('.game5Index .click1 img').css('display','block') $('.game5Index .click1').animate({ 'top': '1.5%', "right": '17.5%', 'transform': 'translate(-50%,-50%)' }, 1000)// setTimeout(function() {// $('.game5Index .click1').css('opacity', '0')// }, 1000) $('.game5Index .imgList li').eq(0).find('img').fadeOut(1500) if(num5.indexOf('1')==-1){ num5.push('1'); success5(); } }) $('.game5Index .click2').click(function() { $('.game5Index .click2 img').css('display','block') $('.game5Index .click2').animate({ 'top': '3%', "right": '11.5%', 'transform': 'translate(-50%,-50%)' }, 1000)// setTimeout(function() {// $('.game5Index .click2').css('opacity', '0')// }, 1000) $('.game5Index .imgList li').eq(1).find('img').fadeOut(1500) if(num5.indexOf('2')==-1){ num5.push('2'); success5(); } }) $('.game5Index .click3').click(function() { $('.game5Index .click3 img').css('display','block') $('.game5Index .click3').animate({ 'top': '3%', "right": '1.5%', 'transform': 'translate(-50%,-50%)',
}, 1000)// setTimeout(function() {// $('.game5Index .click3').css('opacity', '0')// }, 1000) $('.game5Index .imgList li').eq(2).find('img').fadeOut(1500) if(num5.indexOf('3')==-1){ num5.push('3'); success5(); } }) $('.game5Index .closeIcon').click(function() { $('.book_box').fadeOut() $('.successBox').css('display', 'flex') video5.pause()
})
function success5() { if(num5.length == 3) { console.log('成功') setTimeout(function() { $('.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(); }, 1500)
setTimeout(function() { $('.game5Index .book_box').fadeIn() $('.game5Index .maskBgm').fadeIn(1000) video5.play() }, 3500) } } $('.game5Above').click(function(){ $('#game4').load('game4.html'); $('.game5Index').remove(); $('.fiveGame').css({'width':'0','height':'0'}) $('#game5').css({'width':'0','height':'0'}) $('.fourGame').css({'width':'100%','height':'100%'}) $('#game4').css({'width':'100%','height':'100%'}) }) $('.game5Next').click(function(){ $('.game5Index').remove(); $('#success').load('success.html'); $('.fiveGame').css({'width':'0','height':'0'}) $('#game5').css({'width':'0','height':'0'}) $('.win').css({'width':'100%','height':'100%'}) $('#success').css({'width':'100%','height':'100%'}) })</script>
|
