|
|
<link rel="stylesheet" type="text/css" href="css/game3.css" /> <div class="game3Index"> <p class="bgm"><img src="img/game3/bgm.png" /></p> <div class="box_wrap"> <ul class="imgList"> <li><img style="width: .66rem;" src="img/game3/lin1.png" /> <p></p> </li> <li><img style="width: .74rem;" src="img/game3/lin2.png" /> <p></p> </li> <li><img style="width: .6rem;" src="img/game3/lin3.png" /> <p></p> </li> <!--<li></li>
<li></li> <li></li>--> </ul> <div class="clickIcon"> <ul> <li class="click1 click"><img src="img/game3/icon1.png"/></li> <li class="click2 click"><img src="img/game3/icon2.png"/></li> <li class="click3 click"><img src="img/game3/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/game3.png" /></p> </div> <div class="imgList"> <img src="img/img1.png" /> </div> </div> <div class="rightCont"> <div class="titleTip"> <h2>故事原型</h2> <h5>金色的鱼钩</h5> </div> <ul class="textList"> <!--<li>飞夺泸定桥:1935年5月,北上抗日的红军向天险大渡河挺进。大渡河水流湍急,两岸都是高山峻岭,只有一座铁索桥可以通过。这座铁索桥,就是红军北上必须夺取的泸定桥。国民党反动派派了两个团防守泸定桥,阻拦红军北上;后来又调了两个旅赶去增援,妄想把我红军消灭在桥头上。我军早就看穿了敌人的诡计。28日早上,红四团接到上级命令:“29日早晨夺下泸定桥!”时间只剩下20多个小时了</li>
<li>红四团离泸定桥还有240里。敌人的两个旅援兵正在对岸向泸定桥行进。抢在敌人前头,是我军战胜敌人的关键。红四团翻山越岭,沿路击溃了好几股阻击的敌人,到晚上7点钟,离泸定桥还有110里。战士们一整天没顾得上吃饭。天又下起雨来,把他们都淋透了。战胜敌人的决心使他们忘记了饥饿和疲劳。在漆黑的夜里,他们冒着雨,踩着泥水继续前进。忽然对岸出现了无数火把,像一条长蛇向泸定桥的</li> <li>方向奔去,分明是敌人的增援部队。红四团的战士索性也点起火把,照亮了道路跟对岸的敌人赛跑。敌人看到了这边的火把,扯着嗓子喊:“你们是哪个部分的?”我们的战士高声答话:“是碰上红军撤下来的。”对岸的敌人并不疑心。两支军队像两条火龙,隔着大渡河走了二三十里。雨越下越猛,像瓢泼一样,把两岸的火把都浇灭了。对岸的敌人不能再走,只好停下来宿营。红四团仍旧摸黑冒雨前进,终于在</li> <li>29日清晨赶到了泸定桥,把增援的两个旅的敌人抛在后面了。</li>--> </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 game3Above"><img src="img/aboveIcon.png" /></p> <p class="next game3Next"><img src="img/nextIcon.png" /></p> </div> </div> <script type="text/javascript"> var num3 = 0; var leftArr3 = ['2%', '12%', '22%']; var contList3 = [ '1935年,在红军过草地时,指导员让老炊事班长照顾我们几个得胃病的同志走出草地。我们几个同志走不快,一天只能走二十里来路,很快就没了食物。有一次,老班长在水塘边洗衣服时,发现了几条鱼,老班长做了一个鱼钩把鱼钓了上来做给我们几个同志吃。我见老班长没吃鱼,他却说吃过了,我不信。于是等到他收拾完碗筷走后就悄悄跟着他,一看,只见老班长在吃我们几个吃剩的鱼骨头,嚼草根,艰难地硬咽下去,', '我失声喊起来,老班长把党的秘密告诉我,让我不要告诉别的同志。第二天在吃鱼汤时,我们几个小同志怎么也吃不下,老班长鼓励我们要面对事实,为了革命要坚持。后来在老班长的鼓励下我们走到了草地的边际。可是就在这天上午,老班长在水塘边奄奄一息了,老班长说让我们把鱼吃了,一口气走出草地。最后老班长牺牲了。我一定要把金色的鱼钩送到革命烈士纪念馆去,让我们子子孙孙来瞻仰它。(缩写自《金色的鱼钩》)' ]
var liCont3 = ''; var pageNum3 = 1; var total3 = contList3.length for(var i = 0; i < contList3.length; i++) { liCont3 += '<li>' + contList3[i] + '</i>' } $('.game3Index .textList').html(liCont3) $('.game3Index .textList li').eq(0).show().siblings().hide() $('.game3Index .pageNum span').text(total3) $('.game3Index .pageNum text').text(pageNum3)
$('.game3Index .leftIcon').click(function() { if(pageNum3 > 1) { pageNum3--; $('.game3Index .pageNum text').text(pageNum3) $('.game3Index .textList li').eq(pageNum3 - 1).show().siblings().hide() } }) $('.game3Index .rightIcon').click(function() { if(pageNum3 < total3) { pageNum3++; $('.game3Index .pageNum text').text(pageNum3) $('.game3Index .textList li').eq(pageNum3 - 1).show().siblings().hide() } if(pageNum3 == total3) { console.log('第三') setTimeout(function() { $('.game3Index .book_box').fadeOut() $('.game3Index .successBox').css('display', 'flex') }, 1500) } }) $('.game3Index .click1').click(function() { $('.game3Index .click1 img').css('display','block') $('.game3Index .click1').animate({ 'top': '2.5%', "left": '3%', 'transform': 'translate(-50%,-50%)' }, 1000) // setTimeout(function() { // $('.game3Index .click1').css('opacity', '0') // }, 1000) $('.game3Index .imgList li').eq(0).find('img').fadeOut(1500) num3++; success3(); }) $('.game3Index .click2').click(function() { $('.game3Index .click2 img').css('display','block') $('.game3Index .click2').animate({ 'top': '4%', "left": '13%', 'transform': 'translate(-50%,-50%)', }, 1000) // setTimeout(function() { // $('.game3Index .click2').css('opacity', '0') // }, 1000) $('.game3Index .imgList li').eq(1).find('img').fadeOut(1500) num3++; success3(); }) $('.game3Index .click3').click(function() { $('.game3Index .click3 img').css('display','block') $('.game3Index .click3').animate({ 'top': '2%', "left": '23%', 'transform': 'translate(-50%,-50%)', }, 1000) // setTimeout(function() { // $('.game3Index .click3').css('opacity', '0') // }, 1000) $('.game3Index .imgList li').eq(2).find('img').fadeOut(1500) num3++; success3(); }) $('.game3Index .closeIcon').click(function() { $('.game3Index .book_box').fadeOut() $('.game3Index .successBox').css('display', 'flex')
})
function success3() { if(num3 == 3) { console.log('成功') setTimeout(function() { $('.game3Index p.bgm img').attr('src', 'img/game3/successBgm.png') $('.game3Index .box_wrap').fadeOut(); }, 1500)
setTimeout(function() { $('.game3Index .book_box').fadeIn() $('.game3Index .maskBgm').fadeIn() }, 2500) } } $('.game3Above').click(function(){ $('#game2').load('game2.html'); $('.game3Index').remove(); $('.secondGame').css({'width':'100%','height':'100%'}) $('#game2').css({'width':'100%','height':'100%'}) $('.thirdGame').css({'width':'0','height':'0'}) $('#game3').css({'width':'0','height':'0'}) }) $('.game3Next').click(function(){ $('.game3Index').remove() $('#game4').load('game4.html'); $('.thirdGame').css({'width':'0','height':'0'}) $('#game3').css({'width':'0','height':'0'}) $('.fourGame').css({'width':'100%','height':'100%'}) $('#game4').css({'width':'100%','height':'100%'}) }) </script>
|