Browse Source

修改

master
Email 3 years ago
parent
commit
70db1217e0
30 changed files with 741 additions and 164 deletions
  1. 28
      begin.html
  2. BIN
      css/font/icon.eot
  3. BIN
      css/font/icon.ttf
  4. 178
      css/game1.css
  5. 15
      css/game4.css
  6. 4
      css/index.css
  7. 18
      game1.html
  8. 7
      game2.html
  9. 8
      game3.html
  10. 55
      game4.html
  11. 56
      game5.html
  12. BIN
      img/4.gif
  13. BIN
      img/game1/lin1.png
  14. BIN
      img/game1/lin2.png
  15. BIN
      img/game1/lin3.png
  16. BIN
      img/game2/lin1.png
  17. BIN
      img/game2/lin2.png
  18. BIN
      img/game2/lin3.png
  19. BIN
      img/game3/lin1.png
  20. BIN
      img/game3/lin2.png
  21. BIN
      img/game3/lin3.png
  22. BIN
      img/game4/lin1.png
  23. BIN
      img/game4/lin2.png
  24. BIN
      img/game4/lin3.png
  25. BIN
      img/game5/lin1.png
  26. BIN
      img/game5/lin2.png
  27. BIN
      img/game5/lin3.png
  28. 12
      index.html
  29. 79
      js/snow.js
  30. 445
      js/zQuery.js

28
begin.html

@ -44,7 +44,7 @@
}
/*遮罩*/
.mask{
display: none;
/*display: none;*/
width: 100%;
height: 100%;
position: fixed;
@ -56,7 +56,7 @@
}
/*活动规则*/
.guizBox{
display: none;
/*display: none;*/
position: absolute;
left: 50%;
top: 50%;
@ -104,6 +104,23 @@
.box_cont li:nth-child(3){
margin-top: .4rem;
}
.beginIndex .countDown{
width: 2rem;
height: .6rem;
text-align: center;
margin: .1rem auto 0;
background: #377d92;
border-radius: .2rem;
color: #333;
line-height: .6rem;
color: #fff;
}
.beginIndex .countDown text{
color: #fff;
}
.beginIndex .close{
display: none;
}
</style>
<div class="beginIndex">
<!--<p class="bgmImg"><img src="img/begin.png" /></p>-->
@ -136,6 +153,9 @@
</li>
</ul>
</div>
<div class="countDown">
<text>10</text>(s)
</div>
</div>
</div>
<!--开始-->
@ -153,10 +173,14 @@
$('.title').click(function(){
$('.mask').fadeIn();
$('.guizBox').fadeIn()
$('.beginIndex .close').fadeIn()
})
$('.beginBtn').click(function(){
$('.begin').fadeOut(100)
$('.loading').fadeOut(100)
$('#game1').fadeIn(500)
})
//倒计时
</script>

BIN
css/font/icon.eot

BIN
css/font/icon.ttf

178
css/game1.css

@ -1,22 +1,25 @@
.game1Index{
.game1Index {
width: 100%;
height: 100%;
}
.game1Index p.bgm img{
.game1Index p.bgm img {
width: 100%;
height: 100%;
}
.game1Index p.bgm img:nth-child(1){
.game1Index p.bgm img:nth-child(1) {
opacity: 1;
}
.game1Index p.bgm img:nth-child(2){
.game1Index p.bgm img:nth-child(2) {
opacity: 0;
position: absolute;
left: 0;
top: 0;
}
.game1Index .imgList li{
.game1Index .imgList li {
width: 1.21rem;
height: 1.2rem;
background: url(../img/game1/kuang.png) no-repeat;
@ -26,25 +29,27 @@
top: 0;
}
.game1Index .imgList li img{
.game1Index .imgList li img {
position: absolute;
z-index: 9999;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
}
.game1Index .imgList li:nth-child(1){
.game1Index .imgList li:nth-child(1) {
left: 1%;
}
.game1Index .imgList li:nth-child(2){
.game1Index .imgList li:nth-child(2) {
left: 11%;
}
.game1Index .imgList li:nth-child(3){
.game1Index .imgList li:nth-child(3) {
left: 21%;
}
.game1Index .clickIcon li{
.game1Index .clickIcon li {
width: 1rem;
height: 1rem;
position: absolute;
@ -53,30 +58,36 @@
/*background: #000000;
opacity: .5;*/
}
.game1Index .clickIcon li.click1{
.game1Index .clickIcon li.click1 {
top: 40%;
left: 60%;
left: 60%;
}
.game1Index .clickIcon li.click2{
.game1Index .clickIcon li.click2 {
top: 16%;
left: 46%;
width: .5rem;
height: .5rem;
left: 46%;
width: .5rem;
height: .5rem;
}
.game1Index .clickIcon img{
.game1Index .clickIcon img {
width: .92rem;
display: none;
}
.game1Index .clickIcon li.click3{
.game1Index .clickIcon li.click3 {
top: 43%;
left: 15%;
width: 3rem;
height: 1.3rem;
transform: rotate(33deg);
left: 15%;
width: 3rem;
height: 1.3rem;
transform: rotate(33deg);
}
/*书*/
.game1Index .maskBgm{
.game1Index .maskBgm {
display: none;
width: 100%;
height: 100%;
@ -87,18 +98,20 @@
background-size: 100% 100%;
z-index: 99;
}
.game1Index .maskBgm:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(10px);
z-index: 2;
}
.game1Index .book_box{
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(10px);
z-index: 2;
}
.game1Index .book_box {
display: none;
width: 100%;
height: 100%;
@ -106,20 +119,20 @@
left: 0;
top: 0;
z-index: 999;
}
.game1Index div.line{
.game1Index div.line {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: rgba(61, 117, 122,.5);
background: rgba(61, 117, 122, .5);
width: 100%;
height: 1.66rem;
z-index:-1 ;
z-index: -1;
}
.game1Index div.line div{
.game1Index div.line div {
margin: 0 auto;
width: 11rem;
height: 100%;
@ -127,33 +140,38 @@
justify-content: space-between;
align-items: center;
}
.game1Index div.line p{
.game1Index div.line p {
box-sizing: border-box;
font-size: .44rem;
font-weight: 400;
color: #C9C6BA;
}
div.line p{
div.line p {
width: .42rem;
height: .4rem;
font-size: 0;
}
div.line p img{
div.line p img {
width: 100%;
height: 100%;
}
.game1Index div.closeIcon{
.game1Index div.closeIcon {
display: flex;
justify-content: flex-end;
margin-right: 1.2rem;
margin-top: .55rem;
}
.game1Index div.closeIcon img{
.game1Index div.closeIcon img {
width: .546rem;
height: .546rem;
}
.game1Index .bookCont{
.game1Index .bookCont {
width: 9.93rem;
height: 5.89rem;
background: url(../img/bookBgm.png) no-repeat;
@ -161,65 +179,77 @@ div.line p img{
margin: 0 auto;
z-index: 999;
display: flex;
}
.game1Index .leftImg {
width: 3.58rem;
margin-left: .9rem;
}
.game1Index .leftImg .titleTip{
.game1Index .leftImg .titleTip {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: .42rem;
}
.game1Index .leftImg .titleTip p{
.game1Index .leftImg .titleTip p {
color: #1F444B;
font-size: .22rem;
}
.game1Index .leftImg .img{
.game1Index .leftImg .img {
width: 1.18rem;
height: .91rem;
}
.game1Index .leftImg .imgList{
.game1Index .leftImg .imgList {
width: 3.58rem;
height: 4.14rem;
margin-top: .1rem;
}
.game1Index .leftImg img{
.game1Index .leftImg img {
width: 100%;
height: 100%;
}
.game1Index .rightCont{
.game1Index .rightCont {
width: 3.8rem;
margin-left: 1.05rem;
position: relative;
}
.game1Index .rightCont .titleTip{
.game1Index .rightCont .titleTip {
display: flex;
margin-top: .7rem;
justify-content: space-between;
}
.game1Index .rightCont .titleTip h2,
.game1Index .rightCont .titleTip h5{
.game1Index .rightCont .titleTip h5 {
color: #1F444B;
font-size: .3rem;
}
.game1Index .rightCont .titleTip h5{
.game1Index .rightCont .titleTip h5 {
font-weight: normal;
font-size: .22rem;
}
.game1Index .rightCont ul{
.game1Index .rightCont ul {
margin-top: .12rem;
}
.game1Index .rightCont li{
font-size:.2rem ;
.game1Index .rightCont li {
font-size: .2rem;
color: #1F444B;
line-height: .36rem;
}
.game1Index .rightCont .pageNum{
.game1Index .rightCont .pageNum {
position: absolute;
bottom:5%;
bottom: 5%;
left: 40%;
transform: translateX(-50%);
text-align: center;
@ -228,3 +258,21 @@ div.line p img{
}
/*手势*/
.game1Index .shoushi {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
z-index: 99999;
}
.game1Index .shoushi img {
position: absolute;
right: 28%;
top: 11%;
width: 2.5rem;
}

15
css/game4.css

@ -1,4 +1,19 @@
@font-face {
font-family: icon;
src: url("font/icon.ttf"), url("font/icon.eot");
}
.snowList {
/*display: none;*/
}
.snow {
font-family: icon;
color: #fff;
position: absolute;
top: -100px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.game4Index {
width: 100%;
height: 100%;

4
css/index.css

@ -212,14 +212,14 @@ p.bgm {
}*/
.imgList li p{
/*width: 1.21rem;
width: 1.21rem;
height: 1.2rem;
position: absolute;
left: 0;
top: 0;
background: rgba(0,0,0,.5);
z-index: 999999;
border-radius: 5px;*/
border-radius: 5px;
}
p.bgm img{
width: 100%;

18
game1.html

@ -4,6 +4,7 @@
<img src="img/game1/bgm.png" />
<img src="img/game1/successBgm.png" />
</p>
<div class="box_wrap">
<ul class="imgList">
<li><img style="width: .96rem;" src="img/game1/lin1.png" />
@ -67,8 +68,19 @@
<!--<p class="above"><img src="img/aboveIcon.png" /></p>-->
<p class="next game1Next"><img src="img/nextIcon.png" /></p>
</div>
<!--手势-->
<div class="shoushi">
<img src="img/4.gif"/>
</div>
</div>
<script src="js/zQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/snow.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.game1Index .shoushi').click(function(){
$('.game1Index .shoushi').fadeOut(1000)
})
var num = [];
var leftArr = ['2%', '12%', '22%'];
var contList = [
@ -119,7 +131,9 @@
// setTimeout(function() {
// $('.game1Index .click1').css('opacity', '0')
// }, 1000)
// $('.game1Index .imgList li').eq(0).find('img').fadeOut(1500)
$('.game1Index .imgList li').eq(0).find('img').fadeOut(1500)
$('.game1Index .imgList li').eq(0).find('p').fadeOut(1000)
if(num.indexOf('1')==-1){
num.push('1');
success();
@ -137,6 +151,7 @@
// $('.game1Index .click2').css('opacity', '0')
// }, 1000)
$('.game1Index .imgList li').eq(1).find('img').fadeOut(1500)
$('.game1Index .imgList li').eq(1).find('p').fadeOut(1000)
if(num.indexOf('2')==-1){
num.push('2');
success();
@ -155,6 +170,7 @@
// $('.game1Index .click3').css('opacity', '0')
// }, 1000)
$('.game1Index .imgList li').eq(2).find('img').fadeOut(1500)
$('.game1Index .imgList li').eq(2).find('p').fadeOut(1000)
if(num.indexOf('3')==-1){
num.push('3');
success();
@ -184,7 +200,7 @@
setTimeout(function() {
$('.game1Index .book_box').fadeIn()
$('.game1Index .maskBgm').fadeIn(1000)
}, 3500)
}, 4500)
}
}
$('.game1Next').click(function(){

7
game2.html

@ -121,6 +121,8 @@
// $('.game2Index .click1').css('opacity', '0')
// }, 1000)
$('.game2Index .imgList li').eq(0).find('img').fadeOut(1500)
$('.game2Index .imgList li').eq(0).find('p').fadeOut(1000)
if(num2.indexOf('1')==-1){
num2.push('1');
success2();
@ -137,6 +139,7 @@
// $('.game2Index .click2').css('opacity', '0')
// }, 1000)
$('.game2Index .imgList li').eq(1).find('img').fadeOut(1500)
$('.game2Index .imgList li').eq(1).find('p').fadeOut(1000)
if(num2.indexOf('2')==-1){
num2.push('2');
success2();
@ -153,6 +156,8 @@
// $('.game2Index .click3').css('opacity', '0')
// }, 1000)
$('.game2Index .imgList li').eq(2).find('img').fadeOut(1500)
$('.game2Index .imgList li').eq(2).find('p').fadeOut(1000)
if(num2.indexOf('3')==-1){
num2.push('3');
success2();
@ -181,7 +186,7 @@
setTimeout(function() {
$('.game2Index .book_box').fadeIn()
$('.game2Index .maskBgm').fadeIn(1000)
}, 3500)
}, 4500)
}
}
$('.game2Above').click(function(){

8
game3.html

@ -120,6 +120,7 @@
// $('.game3Index .click1').css('opacity', '0')
// }, 1000)
$('.game3Index .imgList li').eq(0).find('img').fadeOut(1500)
$('.game3Index .imgList li').eq(0).find('p').fadeOut(1000)
if(num3.indexOf('1')==-1){
num3.push('1');
success3();
@ -136,6 +137,8 @@
// $('.game3Index .click2').css('opacity', '0')
// }, 1000)
$('.game3Index .imgList li').eq(1).find('img').fadeOut(1500)
$('.game3Index .imgList li').eq(1).find('p').fadeOut(1000)
if(num3.indexOf('2')==-1){
num3.push('2');
success3();
@ -152,6 +155,8 @@
// $('.game3Index .click3').css('opacity', '0')
// }, 1000)
$('.game3Index .imgList li').eq(2).find('img').fadeOut(1500)
$('.game3Index .imgList li').eq(2).find('p').fadeOut(1000)
if(num3.indexOf('3')==-1){
num3.push('3');
success3();
@ -180,7 +185,7 @@
setTimeout(function() {
$('.game3Index .book_box').fadeIn()
$('.game3Index .maskBgm').fadeIn(1000)
}, 3500)
}, 4500)
}
}
$('.game3Above').click(function(){
@ -198,6 +203,7 @@
$('#game3').css({'width':'0','height':'0'})
$('.fourGame').css({'width':'100%','height':'100%'})
$('#game4').css({'width':'100%','height':'100%'})
$('.snowList').fadeIn(1000)
})
</script>

55
game4.html

@ -1,5 +1,6 @@
<link rel="stylesheet" type="text/css" href="css/game4.css" />
<div class="game4Index">
<div class="snowList"></div>
<p class="bgm">
<img src="img/game4/game4Bgm.png" />
<img src="img/game4/successBgm.png" />
@ -68,54 +69,17 @@
</div>
<script type="text/javascript">
var num4 = [];
// var contList4 = [
// '飞夺泸定桥:1935年5月,北上抗日的红军向天险大渡河挺进。大渡河水流湍急,两岸都是高山峻岭,只有一座铁索桥可以通过。这座铁索桥,就是红军北上必须夺取的泸定桥。国民党反动派派了两个团防守泸定桥,阻拦红军北上;后来又调了两个旅赶去增援,妄想把我红军消灭在桥头上。我军早就看穿了敌人的诡计。28日早上,红四团接到上级命令:“29日早晨夺下泸定桥!”时间只剩下20多个小时了',
// '红四团离泸定桥还有240里。敌人的两个旅援兵正在对岸向泸定桥行进。抢在敌人前头,是我军战胜敌人的关键。红四团翻山越岭,沿路击溃了好几股阻击的敌人,到晚上7点钟,离泸定桥还有110里。战士们一整天没顾得上吃饭。天又下起雨来,把他们都淋透了。战胜敌人的决心使他们忘记了饥饿和疲劳。在漆黑的夜里,他们冒着雨,踩着泥水继续前进。忽然对岸出现了无数火把,像一条长蛇向泸定桥的',
// '方向奔去,分明是敌人的增援部队。红四团的战士索性也点起火把,照亮了道路跟对岸的敌人赛跑。敌人看到了这边的火把,扯着嗓子喊:“你们是哪个部分的?”我们的战士高声答话:“是碰上红军撤下来的。”对岸的敌人并不疑心。两支军队像两条火龙,隔着大渡河走了二三十里。雨越下越猛,像瓢泼一样,把两岸的火把都浇灭了。对岸的敌人不能再走,只好停下来宿营。红四团仍旧摸黑冒雨前进,终于在',
// '29日清晨赶到了泸定桥,把增援的两个旅的敌人抛在后面了。',
// ]
// var liCont4 = '';
// var pageNum4 = 1;
// var total4= contList4.length
// for(var i = 0; i <= contList4.length; i++) {
// liCont4 += '<li>' + contList4[i] + '</i>'
// }
// $('.game4Index .textList').html(liCont4)
// $('.game4Index .textList li').eq(0).show().siblings().hide()
// $('.game4Index .pageNum span').text(total4)
// $('.game4Index .pageNum text').text(pageNum4)
// $('.game4Index .leftIcon').click(function() {
// if(pageNum4 > 1) {
// pageNum4--;
// $('.pageNum text').text(pageNum4)
// $('.textList li').eq(pageNum4 - 1).show().siblings().hide()
// }
// })
// $('.game4Index .rightIcon').click(function() {
// if(pageNum4 < total4) {
// pageNum4++;
// $('.game4Index .pageNum text').text(pageNum4)
// $('.game4Index .textList li').eq(pageNum4 - 1).show().siblings().hide()
// }
// if(pageNum4 == total4) {
// setTimeout(function() {
// $('.game4Index .book_box').fadeOut()
// $('.game4Index .successBox').css('display', 'flex')
// }, 1500)
// }
// })
$(function(){
$('.snowList').fadeIn(1000)
})
var video4 = document.getElementById("video4");
  video4.loop = false;
  video4.addEventListener('ended', function () {
$('.book_box').fadeOut()
$('.successBox').css('display', 'flex')
  //监听到播放结束后,在此处可调用自己的接口
   //监听到播放结束后,在此处可调用自己的接口
console.log('播放完毕')
  }, false);
@ -126,10 +90,12 @@
"right": '25%',
'transform': 'translate(-50%,-50%)'
}, 1000)
// setTimeout(function() {
// $('.game4Index .click1').css('opacity', '0')
// }, 1000)
$('.game4Index .imgList li').eq(0).find('img').fadeOut(1500)
$('.game4Index .imgList li').eq(0).find('p').fadeOut(1000)
if(num4.indexOf('1')==-1){
num4.push('1');
success4();
@ -147,6 +113,8 @@
// $('.game4Index .click2').css('opacity', '0')
// }, 1000)
$('.game4Index .imgList li').eq(1).find('img').fadeOut(1500)
$('.game4Index .imgList li').eq(1).find('p').fadeOut(1000)
if(num4.indexOf('2')==-1){
num4.push('2');
success4();
@ -164,6 +132,8 @@
// $('.game4Index .click3').css('opacity', '0')
// }, 1000)
$('.game4Index .imgList li').eq(2).find('img').fadeOut(1500)
$('.game4Index .imgList li').eq(2).find('p').fadeOut(1000)
if(num4.indexOf('3')==-1){
num4.push('3');
success4();
@ -192,10 +162,11 @@
}, 1500)
setTimeout(function() {
$('.snowList').remove()
$('.game4Index .book_box').fadeIn()
$('.game4Index .maskBgm').fadeIn(1000)
video4.play()
}, 3500)
}, 4500)
}
}
$('.game4Above').click(function(){

56
game5.html

@ -68,44 +68,6 @@
</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 () {
@ -123,10 +85,8 @@ var video5 = document.getElementById("video5");
"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)
$('.game5Index .imgList li').eq(0).find('p').fadeOut(1000)
if(num5.indexOf('1')==-1){
num5.push('1');
success5();
@ -140,10 +100,9 @@ var video5 = document.getElementById("video5");
"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)
$('.game5Index .imgList li').eq(1).find('p').fadeOut(1000)
if(num5.indexOf('2')==-1){
num5.push('2');
success5();
@ -157,10 +116,9 @@ var video5 = document.getElementById("video5");
'transform': 'translate(-50%,-50%)',
}, 1000)
// setTimeout(function() {
// $('.game5Index .click3').css('opacity', '0')
// }, 1000)
$('.game5Index .imgList li').eq(2).find('img').fadeOut(1500)
$('.game5Index .imgList li').eq(2).find('p').fadeOut(1000)
if(num5.indexOf('3')==-1){
num5.push('3');
success5();
@ -171,9 +129,7 @@ var video5 = document.getElementById("video5");
$('.successBox').css('display', 'flex')
video5.pause()
})
function success5() {
if(num5.length == 3) {
console.log('成功')
@ -192,7 +148,7 @@ var video5 = document.getElementById("video5");
$('.game5Index .book_box').fadeIn()
$('.game5Index .maskBgm').fadeIn(1000)
video5.play()
}, 3500)
}, 4500)
}
}
$('.game5Above').click(function(){

BIN
img/4.gif

Before After
Width: 500  |  Height: 600  |  Size: 43 KiB

BIN
img/game1/lin1.png

Before After
Width: 102  |  Height: 74  |  Size: 4.6 KiB Width: 96  |  Height: 68  |  Size: 8.5 KiB

BIN
img/game1/lin2.png

Before After
Width: 98  |  Height: 71  |  Size: 2.5 KiB Width: 92  |  Height: 66  |  Size: 6.9 KiB

BIN
img/game1/lin3.png

Before After
Width: 100  |  Height: 59  |  Size: 2.3 KiB Width: 94  |  Height: 53  |  Size: 8.7 KiB

BIN
img/game2/lin1.png

Before After
Width: 80  |  Height: 82  |  Size: 2.7 KiB Width: 74  |  Height: 76  |  Size: 5.8 KiB

BIN
img/game2/lin2.png

Before After
Width: 96  |  Height: 79  |  Size: 2.9 KiB Width: 90  |  Height: 73  |  Size: 6.2 KiB

BIN
img/game2/lin3.png

Before After
Width: 100  |  Height: 40  |  Size: 1.4 KiB Width: 94  |  Height: 34  |  Size: 4.2 KiB

BIN
img/game3/lin1.png

Before After
Width: 69  |  Height: 84  |  Size: 1.3 KiB Width: 66  |  Height: 81  |  Size: 3.0 KiB

BIN
img/game3/lin2.png

Before After
Width: 77  |  Height: 58  |  Size: 3.4 KiB Width: 74  |  Height: 56  |  Size: 5.9 KiB

BIN
img/game3/lin3.png

Before After
Width: 55  |  Height: 79  |  Size: 1.3 KiB Width: 60  |  Height: 85  |  Size: 4.5 KiB

BIN
img/game4/lin1.png

Before After
Width: 99  |  Height: 72  |  Size: 3.1 KiB Width: 91  |  Height: 64  |  Size: 4.2 KiB

BIN
img/game4/lin2.png

Before After
Width: 97  |  Height: 46  |  Size: 1.7 KiB Width: 89  |  Height: 38  |  Size: 6.2 KiB

BIN
img/game4/lin3.png

Before After
Width: 80  |  Height: 85  |  Size: 3.4 KiB Width: 72  |  Height: 77  |  Size: 4.9 KiB

BIN
img/game5/lin1.png

Before After
Width: 86  |  Height: 65  |  Size: 1.9 KiB Width: 80  |  Height: 59  |  Size: 3.1 KiB

BIN
img/game5/lin2.png

Before After
Width: 87  |  Height: 70  |  Size: 2.3 KiB Width: 81  |  Height: 64  |  Size: 10 KiB

BIN
img/game5/lin3.png

Before After
Width: 89  |  Height: 70  |  Size: 2.3 KiB Width: 83  |  Height: 64  |  Size: 12 KiB

12
index.html

@ -93,6 +93,18 @@
$('.flex-center').fadeOut(10)
// $('.begin').fadeIn(100)
$('.load').attr('src', 'img/begin.png')
var num = 3;
var timeDown = setInterval(function(){
console.log(num--)
$('.countDown text').text(num)
if(num==0){
clearInterval(timeDown)
$('.countDown').fadeOut(1000)
$('.mask').fadeOut(1000);
$('.guizBox').fadeOut(1000)
}
},1000)
$('.begin').css('display', 'block')
}, 500);
}

79
js/snow.js

@ -0,0 +1,79 @@
function win(attr) { //获取可视区尺寸,参数为height|width
// 横屏
var detectOrient = function() {
var width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight,
wrapper = document.getElementById("wrap"),
style = "";
if(width >= height) { // 竖屏
style += "width:100%";
style += "height:100%;";
style += "-webkit-transform: rotate(0); transform: rotate(0);";
style += "-webkit-transform-origin: 0 0;";
style += "transform-origin: 0 0;";
} else { // 横屏
style += "width:" + height + "px;"; // 注意旋转后的宽高切换
style += "height:" + width + "px;";
style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
// 注意旋转中点的处理
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
}
wrapper.style.cssText = style;
}
window.onresize = detectOrient;
detectOrient();
}
window.onload = function() {
var bd = document.getElementsByClassName('snowList'); //获取body
function snow() { //雪花函数
var win_height = '100%'; //获取窗口高度
var win_width = document.documentElement.clientHeight; //获取窗口宽度
function createsnow() { //创建雪花函数
var snowdiv = document.createElement('div'); //新建一个div
snowdiv.className = 'snow'
snowdiv.innerHTML = "j"; //写入雪花(字体的代码为j)
var size = 20 + parseInt(Math.random() * 30); //随机生成雪花的大小
var left = parseInt(win_width * (Math.random()) * 0.98); //随机生成left值
snowdiv.style.fontSize = size + 'px'; //应用字体大小
snowdiv.style.width = size + 'px'; //div应用宽度
snowdiv.style.height = size + 'px'; //div应用高度
snowdiv.style.left = left + 'px'; //雪花的left值
$('.snowList').append(snowdiv)
// bd.append(snowdiv); //将此雪花放入文档中
return snowdiv; //返回这个雪花对象
}
setInterval(function() {
var snow = createsnow(); //创建雪花并得到这一对象
var sbd = Math.ceil(Math.random() * 10); //随机生成下落速度
move(snow, sbd); //移动雪花
}, 100);
function move(obj, speed) { //移动函数
var top = 0;
var timer = setInterval(
function() {
top = top + speed; //改变top值
obj.style.top = top + 'px';
if(top > win_height - 20) {
clearInterval(timer); //下落停止
}
}, 30);
}
setInterval(function() { //一段时间之后清理一次雪花,防止文档过大卡住
var snows = document.getElementsByClassName('snow');
for(var i = 0; i < snows.length / 3; i++) {
snows[i].parentNode.removeChild(snows[i]);
}
}, 5000);
}
snow(); //执行snow函数
window.onresize = function() { //窗口改变
var snows = document.getElementsByTagName('div');
snows.className="snow"
for(var i = 0; i < snows.length; i++) {
snows[i].parentNode.removeChild(snows[i]);
}
}
}

445
js/zQuery.js

@ -0,0 +1,445 @@
function rgb_color(){//随机rgb色生成函数,返回值为rgb颜色字符串
var r=parseInt(Math.random()*255);
var g=parseInt(Math.random()*255);
var b=parseInt(Math.random()*255);
var newcolor="rgb("+r+","+g+","+b+")";
return newcolor;
}
function rgba_color(){//随机rgba色生成函数,返回值为rgba颜色字符串
var r=parseInt(Math.random()*255);
var g=parseInt(Math.random()*255);
var b=parseInt(Math.random()*255);
var a=Math.random();
var newcolor="rgba("+r+","+g+","+b+","+a+")";
return newcolor;
}
function getbyclass(parent,classname){//通过类名获取元素函数,参数为父元素、类名,返回值为元素数组
var result=new Array();
var allclass=parent.getElementsByTagName('*');
for (var i=0; i<allclass.length;i++ )
{
if(classname==allclass[i].className)
result.push(allclass[i]);
}
return result;
}
function getbyclassname(tagname,classname){//通过类名获取元素函数,参数为标签名、类名,返回值为元素数组
var result=new Array();
var allclass=document.getElementsByTagName(tagname);
for (var i=0; i<allclass.length;i++ )
{
if(classname==allclass[i].className)
result.push(allclass[i]);
}
return result;
}
function index(current, obj)
{ //获取元素索引值
for (var i = 0; i < obj.length; i++)
{
if (obj[i] == current)
{
return i;
}
}
}
function win(attr)
{//获取可视区尺寸,参数为height|width
switch(attr)
{
case 'height'://获取窗口高度
if (window.innerHeight)
{
winHeight = window.innerHeight;return winHeight;
}else if ((document.body) && (document.body.clientHeight)){
winHeight = document.body.clientHeight;return winHeight;
}
if (document.documentElement && document.documentElement.clientHeight)
{
winHeight = document.documentElement.clientHeight;return winHeight;
}
break;
case 'width'://获取窗口宽度
if (window.innerWidth){
winWidth = window.innerWidth;return winWidth;
}else if ((document.body) && (document.body.clientWidth)){
winWidth = document.body.clientWidth; return winWidth;
}//通过深入Document内部对body进行检测,获取窗口大小
if (document.documentElement &&document.documentElement.clientWidth)
{
winWidth = document.documentElement.clientWidth;return winWidth;
}
break;
case 'scrollTop':
var scrollTop;
if(typeof window.pageYOffset != 'undefined'){
scrollTop = window.pageYOffset;
}
else
if(typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat'){
scrollTop = document.documentElement.scrollTop;
}
else
if(typeof document.body != 'undefined'){
scrollTop = document.body.scrollTop;
}
return scrollTop;break;
default :return 0;break;
}
}
/**************************************************运动框架*****************************************************/
function css(obj, attr, value)
{
var re=[];
if(arguments.length==2)
{
switch(attr){
case 'opacity':re.push(Math.round(100*parseFloat(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr])));return re;break;
case 'backgroundPosition':var res=obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr];res=res.split(" ");res[0]=parseInt(res[0]);res[1]=parseInt(res[1]);return res;break;
case 'rotate':var transformstr=obj.currentStyle?obj.currentStyle['transform']:document.defaultView.getComputedStyle(obj, false)['webkitTransform']||document.defaultView.getComputedStyle(obj, false)['msTransform']||document.defaultView.getComputedStyle(obj, false)['MozTransform']||document.defaultView.getComputedStyle(obj, false)['OTransform']||document.defaultView.getComputedStyle(obj, false)['transform']+"";
var matrixarray=transformstr.split(",");
re.push(Math.ceil(Math.acos(matrixarray[3])/Math.PI*180));return re;break;
case 'translate':
var transformstr=obj.currentStyle?obj.currentStyle['transform']:document.defaultView.getComputedStyle(obj, false)['webkitTransform']||document.defaultView.getComputedStyle(obj, false)['msTransform']||document.defaultView.getComputedStyle(obj, false)['MozTransform']||document.defaultView.getComputedStyle(obj, false)['OTransform']||document.defaultView.getComputedStyle(obj, false)['transform']+"";
var matrixarray=transformstr.split(",");
re.push(parseInt(matrixarray[4]));re.push(parseInt(matrixarray[5]));return re;break;
case 'translateX'://transform 2d转换中的translateX
var transformstr=obj.currentStyle?obj.currentStyle['transform']:document.defaultView.getComputedStyle(obj, false)['webkitTransform']||document.defaultView.getComputedStyle(obj, false)['msTransform']||document.defaultView.getComputedStyle(obj, false)['MozTransform']||document.defaultView.getComputedStyle(obj, false)['OTransform']||document.defaultView.getComputedStyle(obj, false)['transform']+"";
var matrixarray=transformstr.split(",");
re.push((parseInt(matrixarray[4])));return re;break;
case 'translateY'://transform 2d转换中的translateY
var transformstr=obj.currentStyle?obj.currentStyle['transform']:document.defaultView.getComputedStyle(obj, false)['webkitTransform']||document.defaultView.getComputedStyle(obj, false)['msTransform']||document.defaultView.getComputedStyle(obj, false)['MozTransform']||document.defaultView.getComputedStyle(obj, false)['OTransform']||document.defaultView.getComputedStyle(obj, false)['transform']+"";
var matrixarray=transformstr.split(",");
re.push((parseInt(matrixarray[5])));return re;break;
case 'transform'://transform 2d matrix方法
var transformstr=obj.currentStyle?obj.currentStyle['transform']:document.defaultView.getComputedStyle(obj, false)['webkitTransform']||document.defaultView.getComputedStyle(obj, false)['msTransform']||document.defaultView.getComputedStyle(obj, false)['MozTransform']||document.defaultView.getComputedStyle(obj, false)['OTransform']||document.defaultView.getComputedStyle(obj, false)['transform']+"";
var matrixarray=transformstr.split(",");
re.push(parseInt(matrixarray[0].match(/-?\d+(\.\d+)?/g)[0]*10000));//提出数组第一个字符串中的数字
re.push(parseInt(matrixarray[1].match(/-?\d+(\.\d+)?/g)[0]*10000));
re.push(parseInt(matrixarray[2].match(/-?\d+(\.\d+)?/g)[0]*10000));
re.push(parseInt(matrixarray[3].match(/-?\d+(\.\d+)?/g)[0]*10000));
re.push(parseInt(matrixarray[4].match(/-?\d+(\.\d+)?/g)[0]*10000));
re.push(parseInt(matrixarray[5].match(/-?\d+(\.\d+)?/g)[0]*10000));
// console.log(parseInt(matrixarray[0].match(/-?\d+(\.\d+)?/g)[0]*10000)+" "+
// parseInt(matrixarray[1].match(/-?\d+(\.\d+)?/g)[0]*10000)+" "+
// parseInt(matrixarray[2].match(/-?\d+(\.\d+)?/g)[0]*10000)+" "+
// parseInt(matrixarray[3].match(/-?\d+(\.\d+)?/g)[0]*10000)+" "+
// parseInt(matrixarray[4].match(/-?\d+(\.\d+)?/g)[0]*10000)+" "+
// parseInt(matrixarray[5].match(/-?\d+(\.\d+)?/g)[0]*10000));
return re;break;
default :
re.push(parseInt(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]));return re;break;
}
}
else if(arguments.length==3)
switch(attr)
{
case 'width':
case 'height':
case 'paddingLeft':
case 'paddingTop':
case 'paddingRight':
case 'paddingBottom':
value[0]=Math.max(value[0],0);
case 'left':
case 'top':
case 'marginLeft':
case 'marginTop':
case 'marginRight':
case 'marginBottom':
obj.style[attr]=value[0]+'px';
break;
case 'opacity':
obj.style.filter="alpha(opacity:"+value[0]+")";
obj.style.opacity=value[0]/100;
break;
case 'backgroundPosition':
obj.style.backgroundPosition=value[0]+'px '+value[1]+'px';break;
case 'rotate':
obj.style.webkitTransform="rotate(" + value[0]+ "deg)";
obj.style.msTransform="rotate(" + value[0]+ "deg)";
obj.style.MozTransform="rotate(" + value[0] + "deg)";
obj.style.OTransform="rotate(" + value[0]+ "deg)";
obj.style.transform="rotate(" + value[0] + "deg)";
break;
case 'translate':
obj.style.webkitTransform="translate(" + value[0] + "px,"+value[1]+"px)";
obj.style.msTransform="translate(" + value[0] + "px,"+value[1]+"px)";
obj.style.MozTransform="translate(" + value[0] + "px,"+value[1]+"px)";
obj.style.OTransform="translate(" + value[0] + "px,"+value[1]+"px)";
obj.style.transform="translate(" + value[0] + "px,"+value[1]+"px)";
break;
case 'translateX':obj.style.webkitTransform="translateX(" + value[0] + "px)";
obj.style.msTransform="translateX(" + value[0] + "px)";
obj.style.MozTransform="translateX(" + value[0] + "px)";
obj.style.OTransform="translateX(" + value[0] + "px)";
obj.style.transform="translateX(" + value[0] + "px)";
break;
case 'translateY':obj.style.webkitTransform="translateY(" + value[0] + "px)";
obj.style.msTransform="translateY(" + value[0] + "px)";
obj.style.MozTransform="translateY(" + value[0] + "px)";
obj.style.OTransform="translateY(" + value[0] + "px)";
obj.style.transform="translateY(" + value[0] + "px)";
break;
case 'transform':obj.style.webkitTransform="matrix(" + value[0] + ","+value[1] + ","+value[2] + ","+value[3] + ","+value[4] + ","+value[5] +")";
obj.style.msTransform="matrix(" + value[0] + ","+value[1] + ","+value[2] + ","+value[3] + ","+value[4] + ","+value[5] +")";
obj.style.MozTransform="matrix(" + value[0] + ","+value[1] + ","+value[2] + ","+value[3] + ","+value[4] + ","+value[5] +")";
obj.style.OTransform="matrix(" + value[0] + ","+value[1] + ","+value[2] + ","+value[3] + ","+value[4] + ","+value[5] +")";
obj.style.transform="matrix(" + value[0] + ","+value[1] + ","+value[2] + ","+value[3] + ","+value[4] + ","+value[5] +")";
break;
default:
obj.style[attr]=value[0];
}
return function (attr_in, value_in){css(obj, attr_in, value_in)};
}
function stop(obj)
{
clearInterval(obj.timer);
}
function move(obj, oTarget, iType, fnCallBack, fnDuring)
{
var fnMove=null;
if(obj.timer)
{
clearInterval(obj.timer);
}
switch(iType)
{
case "buffer":
fnMove=do_buffer_move;
break;
case "flex":
fnMove=do_flex_move;
break;
default:
fnMove=do_buffer_move;
break;
}
obj.timer=setInterval(function (){
fnMove(obj, oTarget, fnCallBack, fnDuring);
}, 30);
}
/*------------------------------------运动函数中的全局变量-------------------------------------------*/
var attr='';
var next=[];
var cur;
var stopBtn=false;
function do_buffer_move(obj, oTarget, fnCallBack, fnDuring)
{
stopBtn=false;var count=0;
if(!obj.speed)obj.speed={};//该对象的速度属性,包括多个属性值速度,如果未定义则定义
for(attr in oTarget)
{
if(!obj.speed[attr]){obj.speed[attr]=[];}//该对象的某一属性的速度值,值为该属性的速度值的数组
cur=css(obj, attr);
if (attr=='transform')
{
for (var j=0;j<cur.length ;j++)
{
if(undefined==obj.speed[attr][j])obj.speed[attr][j]=0;//在该对象目前的属性中,若某一速度参数未定义,则定义
var temp=parseInt(oTarget[attr][j]*10000);
if(Math.abs(temp-cur[j])>1000)//由于小数的特殊性,无法保证两数一致,相差很小时忽略差距
{
obj.speed[attr][j]=(temp-cur[j])/5;
obj.speed[attr][j]=obj.speed[attr][j]>0?Math.ceil(obj.speed[attr][j]):Math.floor(obj.speed[attr][j]);
next[j]=(cur[j]+obj.speed[attr][j])/10000;
//console.log(j+" "+attr+" "+cur[j]+' '+obj.speed[attr][j]+' '+next[j]+' '+oTarget[attr][j]) ;//运动过程中的参数值
}
else{
next[j]=parseInt(oTarget[attr][j]*10000)/10000;//已经到达目标的值保持
count++;//记录以达到目标的个数
//console.log(attr+"count"+count);
}
}
}
else{
for (var j=0;j<cur.length ;j++)
{
if(undefined==obj.speed[attr][j])obj.speed[attr][j]=0;//在该对象目前的属性中,若某一速度参数未定义,则定义
if(oTarget[attr][j]!=cur[j])
{
oTarget[attr][j]=parseInt(oTarget[attr][j]);
obj.speed[attr][j]=(oTarget[attr][j]-cur[j])/5;
obj.speed[attr][j]=obj.speed[attr][j]>0?Math.ceil(obj.speed[attr][j]):Math.floor(obj.speed[attr][j]);
next[j]=cur[j]+obj.speed[attr][j];
//console.log(j+" "+attr+" "+cur[j]+' '+obj.speed[attr][j]+' '+next[j]+' '+oTarget[attr][j]) ;//运动过程中的参数值
}
else{
next[j]=oTarget[attr][j];//已经到达目标的值保持
count++;//记录以达到目标的个数
//console.log(attr+"count"+count);
}
}
}
css(obj,attr,next);
}
var allattr=0;//所有属性计数器清零
for(attr in oTarget)
{
for (var i=0;i<oTarget[attr].length; i++)
{
allattr++;//计算出所有属性个数
}
}
//console.log(count+" "+allattr);//以达个数与总个数对比
if(count==allattr){stopBtn=true;}//当所有属性都达到目标时停止开关打开
if(fnDuring)fnDuring.call(obj);
if(stopBtn)
{
obj.speed={};
//console.log("本次运动完成");
clearInterval(obj.timer);
if(fnCallBack)fnCallBack.call(obj);
}
}
function do_flex_move(obj, oTarget, fnCallBack, fnDuring)
{
stopBtn=false;var count=0;//有关是否运动的变量
if(!obj.speed)obj.speed={};//该对象的速度属性,包括多个属性值速度,如果未定义则定义
for(attr in oTarget)
{
if(!obj.speed[attr]){obj.speed[attr]=[];}//该对象的某一属性的速度值,值为该属性的速度值的数组
//console.log(obj.speed[attr]);
cur=css(obj, attr);
if (attr=='transform')
{
for (var j=0;j<cur.length ;j++)
{
if(undefined==obj.speed[attr][j])obj.speed[attr][j]=1;//在该对象目前的属性中,若某一速度参数未定义,则定义
var temp=parseInt(oTarget[attr][j]*10000);
if(Math.abs(parseInt(obj.speed[attr][j]))!=0)
{
obj.speed[attr][j]+=(temp-cur[j])/5;
obj.speed[attr][j]*=0.7;
obj.speed[attr][j]=parseInt(obj.speed[attr][j]);
next[j]=(cur[j]+obj.speed[attr][j])/10000;
//console.log(j+" "+attr+" "+cur[j]+' '+obj.speed[attr][j]+' '+next[j]+' '+oTarget[attr][j]) ;//运动过程中的参数值
}
else
{
next[j]=parseInt(oTarget[attr][j]*10000)/10000;//已经到达目标的值保持
count++;//记录以达到目标的个数
//console.log(attr+"count"+count);
}
}
}else{
for (var j=0;j<cur.length ;j++)
{
if(undefined==obj.speed[attr][j])obj.speed[attr][j]=1;//在该对象目前的属性中,若某一速度参数未定义,则定义
if(Math.abs(obj.speed[attr][j])!=0)
{
obj.speed[attr][j]+=(oTarget[attr][j]-cur[j])/5;
obj.speed[attr][j]*=0.7;
obj.speed[attr][j]=parseInt(obj.speed[attr][j]);
next[j]=cur[j]+obj.speed[attr][j];
//console.log(j+" attr "+attr+" "+cur[j]+' '+obj.speed[attr][j]+' '+next[j]+' '+oTarget[attr][j]) ;//运动过程中的参数值
}
else
{
next[j]=oTarget[attr][j];//已经到达目标的值保持
count++;//记录以达到目标的个数
//console.log(attr+"count"+count);
}
}
}
css(obj,attr,next);
}
var allattr=0;//所有属性计数器清零
for(attr in oTarget)
{
for (var i=0;i<oTarget[attr].length; i++)
{
allattr++;//计算出所有属性个数
}
}
//console.log(count+" "+allattr);//以达个数与总个数对比
if(count==allattr){stopBtn=true;}//当所有属性都达到目标时停止开关打开
if(fnDuring)fnDuring.call(obj);
if(stopBtn)
{
obj.speed={};
//console.log("本次运动完成");
clearInterval(obj.timer);
if(fnCallBack)fnCallBack.call(obj);
}
}
function drag_throw_move(obj,speedX,speedY){//拖拽+抛出运动,使用时需首先定义timer定时器,传入对象、水平速度和竖直速度
timer=setInterval(function (){
speedY+=3;//与重力相似,y轴的速度会随着物体下落而增大
var left=obj.offsetLeft+speedX;//计算定位值
var top=obj.offsetTop+speedY;
if (top>=(win('height')-obj.offsetHeight))//碰撞到底部,y轴速度反向,x轴速度减小
{
speedY*=-0.8;
speedX*=0.8;
top=(win('height')-obj.offsetHeight);
}else if (top<=0)//碰撞到顶部,y轴速度反向,x轴速度减小
{
speedY*=-0.8;
speedX*=0.8;
top=0;
}
if (left>=(win('width')-obj.offsetWidth))//碰撞到右侧,X轴速度反向且减小
{
speedX*=-0.8;
left=(win('width')-obj.offsetWidth);
}else if (left<=0)//碰撞到左侧,X轴速度反向且减小
{
speedX*=-0.8;
left=0;
}
if (Math.abs(speedX)<1)//速度很小时视为停止
{
speedX=0;
}
if (Math.abs(speedY)<1)//速度很小时视为停止
{
speedY=0;
}
if(speedX==0&&speedY==0&&top==(win('height')-obj.offsetHeight)){//运动过程停止
clearInterval(timer);
}
obj.style.left=left+'px';//应用定位
obj.style.top=top+'px';
},30);
}
function drag(obj){//实现拖拽,参数为对象
obj.onmousedown=function (ev){//按下鼠标
var oev=ev||event;
var disX=oev.clientX-obj.offsetLeft;
var disY=oev.clientY-obj.offsetTop;
document.onmousemove=function (ev){//拖动鼠标
var oev=ev||event;
var left=oev.clientX-disX;
var top=oev.clientY-disY;
obj.style.left=left+'px';//更新对象的位置
obj.style.top=top+'px';
}
document.onmouseup=function (){//抬起鼠标
document.onmousemove=null;
document.onmouseup=null;
}
}
}
/**************************************************运动框架结束*****************************************************/
Loading…
Cancel
Save