You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
197 lines
8.1 KiB
197 lines
8.1 KiB
<link rel="stylesheet" type="text/css" href="css/game3.css" />
|
|
<div class="game3Index">
|
|
<p class="bgm">
|
|
<img src="img/game3/bgm.png" />
|
|
<img src="img/game3/successBgm.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">
|
|
<div>
|
|
<p class="leftIcon"><img src="img/leftIcon.png"/> </p>
|
|
<p class="rightIcon"> <img src="img/rightIcon.png"/> </p>
|
|
</div>
|
|
</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').eq(0).animate({
|
|
'opacity':'0'
|
|
},1000)
|
|
$('.game3Index p.bgm img').eq(1).animate({
|
|
'opacity':'1',
|
|
'z-index':'99'
|
|
},1000)
|
|
$('.game3Index .box_wrap').fadeOut();
|
|
}, 1500)
|
|
|
|
setTimeout(function() {
|
|
$('.game3Index .book_box').fadeIn()
|
|
$('.game3Index .maskBgm').fadeIn(1000)
|
|
}, 3500)
|
|
}
|
|
}
|
|
$('.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>
|