jquery动画

Posted 2020-11-24 fqh123

英雄难过棍子关小游戏可以带大家熟悉jquery动画

看源码

index.js:

$(function(){
var newNode=$("<div class=‘shadow‘></div><div class=‘dialog‘><p>游戏说明：<br /> 1、该游戏为一款好玩的闯关挑战类游戏，可以锻炼玩家的判断力，提高玩家的敏捷思维能力。<br /> 2、可以选择闯关模式或者挑战模式开始游戏。进入闯关模式后点击上方按钮可选择已解锁的关卡。<br /> 3、闯关模式总共有十个关卡，每通过一个关卡，游戏难度会逐渐增大。如果玩家玩通关闯关模式，会获得W币奖励。 <br /> 4、挑战模式会计算积分，玩家可以在线存档，也可以提交自己的积分来查看自己的排行。<br /> 5、本游戏引入了金币机制，即W币，初始金币为3个，玩家可以通过每日签到(+1 W币，连续签到从第二天起+2 W币)和完成每日的挑战任务(随机+7或8或9W币)或玩通关闯关模式(随机+10或11或12 W币)来获得W币，W币可以用来购买道具。本游戏目前含有四种道具，分别是原地复活道具、水波特效道具、蝴蝶跟随鼠标特效道具和下雪特效道具。原地复活道具只可以在挑战模式使用，其它三种道具均为特效道具，每次购买后有七天使用期限，七天后需再次购买才可继续使用。</p><button class=‘back1‘>返回</button></div> ");
$(".intro").click(function(){
    $(".contain").after(newNode);
    $(".shadow").css("height",$(window).height());
})
$(".dialog>button").live("click",function(){//live可以绑定动态添加元素，on在1.9版本之前不可以
    $(".dialog").remove();
    $(".shadow").remove();
})

})

index.css

*{
    margin:0;padding:0;list-style: none;text-decoration:none;
}
body{
    background: url(‘../img/3.jpg‘);
}
h3{
    /*background: pink;*/display: block;text-align: center;margin-top:50px;font-size: 20px;
}
.contain{
    width:500px;/*background: red;*/position: absolute;left:50%;margin-left:-200px;
}
.contain a{
    width:130px;height:36px;text-align: center;line-height: 36px;display: block;
    border:3px solid #67C330;margin-top:100px;color: black;border-radius:8px;background: 
    linear-gradient(180deg,white,#67C330);
}
.shadow{
    width:100%;position: absolute;top:0;background: rgba(0,0,0,0.5);
}
.dialog{
    width:500px;position: absolute;background: white;left:50%;margin-left: -240px;margin-top:20px;
}
.dialog p{
    height:300px;overflow: scroll;padding:20px;
}
.dialog button{
    width:130px;height:36px;border:2px solid #3D92B6;background: linear-gradient(180deg,white,#3D92B6);
    margin:50px auto 20px;display: block;border-radius: 8px;box-shadow: 0 0 0 3px white inset;
    cursor: pointer;
}

zhuye.css

*{
    margin:0;padding:0;list-style: none;text-decoration: none;
}
body{
    background:url(‘../img/19.jpg‘);
}
.nav1{
    /*background: pink;*/text-align: center;margin:50px auto;
}
.gq{
    width:150px;height:36px;background: white;display: inline-block;text-align: center;
    line-height: 36px;border:1px solid black;border-radius: 8px;margin-left:100px;
}
.caidan{
    background:linear-gradient(to right bottom,white,#EEB071);width:150px;height:36px;
    display: inline-block;text-align: center;line-height: 36px;border:#EE7700 solid 1px;
    box-shadow: 0 0 2px 3px #EE7700;margin-left:100px;border-radius:8px;color:black;
}
.btn{
    display: block;width:100px;height: 100px;background: url(‘../img/btn-bg.png‘);margin-left:55%;
}
.contain{
    /*background:pink;*/position: fixed;bottom:0;height:250px;width:100%;
}
.pillarbox>div{
    width:100px;height:250px;background: yellow;position: absolute;bottom:0;
}
.man{
    position: absolute;bottom:98%;left:50px;
    
}
.stick{
    width:5px;height:0;background: green;position: absolute;bottom:250px;left:95px;

}
.success,.fail{
    width:400px;background: rgba(0,0,0);color:white;padding:10px;position: absolute;
    left:50%;margin-left:-200px;margin-top:50px;text-align:center;z-index: 2;
    border-radius: 10px;box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.5); display: none;
}
.success>p,.fail>p{
    font-size: 18px;
}
.success>button,.fail>button{
    margin-top:50px;font-size: 18px;padding:5px;width:130px;height:36px;background: white;
    border-radius: 8px;
}
.shadow{
    width:100%;background:red;opacity: 0.5;position: absolute;top:0;
}
.stickdown{
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    transform-origin:5px 100%;
    transition:transform 0.35s linear;
}

下面是主要学习jquery知识点包括动画的知识：

zhuye.js

$(document).ready(function(){
    var stop=true;//定义一个标签
    var ind=0;
    var min=60;
    var max=$(".contain").offset().top-min//offset()获取对象left和top值  top是offset()的top属性
    console.log(max)
    // 排列柱子的函数
    function play(){
            var num=0;
            for(var i=0;i<4;i++){
            var par=parseInt(Math.random()*(max-min)+min);
            if(i==0){
                $(".pillarbox>div").eq(0).css("left",0);
            }else{
                num=num+par+100;
                $(".pillarbox>div").eq(i).css("left",num);
            }
        }
    }
    play();//执行排列柱子的函数
    // 鼠标点击按钮
    $(".btn").mousedown(function(){
        if(stop){
            $(".btn").css("background","url(img/btn-bg-click.png)")//点击按钮 背景变成灰色
            $(".stick").animate({"height":max},2500);//点击按钮  杆子增长
        }
        
    })
    // 鼠标点击按钮
    // 鼠标松开按钮
    $(".btn").mouseup(function(){
        if(stop){
            stop=false;
            $(".btn").css("background","url(img/btn-bg.png)")//松开按钮  恢复正常颜色
            $(".stick").stop(false,false).addClass(‘stickdown‘);//松开按钮  杆子停止动画
            setTimeout(function(){
                $(".man>img").attr("src","img/stick.gif");
                var stickleft=parseInt($(".stick").css("left"));//string  获取杆子的left值
                console.log(typeof(stickleft))//num
                var stickheight=$(".stick").height();//height()方法获得或设置对象的高度
                console.log(typeof(stickheight))//num
                var nextdivleft=parseInt($(".pillarbox>div").eq(ind+1).css("left"))
                $(".man").animate({"left":stickleft+stickheight},1000,function(){//回调函数，是否掉下
                    if(stickleft+stickheight>nextdivleft&&stickleft+stickheight<nextdivleft+100){
                        $(".man").css("left",nextdivleft+50);//小人left值在下一根柱子的50px处
                        $(".man>img").attr("src","img/stick_stand.png");//小人变成静态
                        $(".stick").css({"left":nextdivleft+95,"height":0}).removeClass("stickdown");
                        $(".contain").animate({"left":-nextdivleft},1000);//柱子整体左移
                        stop=true;
                        ind++;
                        if(ind==3){
                            $(".success").show();
                            success();
                        }
                    }else{//否则小人掉下去
                        $(".man").animate({"bottom":-$(".man").height()},1000,fail)
                        $(".shadow").css("height",$(window).height());
                    }
                });
            },1000)
        }
        
    })
    // 鼠标松开按钮
    // replay按钮
    $(".replay").click(function(){
        replay();
    })
    function replay(){
        play();
        $(".success").hide();
        $(".fail").hide();
        $(".stick").css({"left":95,"height":0}).removeClass("stickdown");
        $(".contain").css("left",0);
        $(".man").css({"left":50,"bottom":‘98%‘});
        $(".man>img").attr("src","img/stick_stand.png");
        $(".shadow").css("height",0);
        stop=true;
        ind=0;
    }
    // 下一关  next
    var leval=1;
    $(".next").click(function(){
        $(".gq").html("关卡"+(++leval));
        replay();
    })
    // 成功名言
    function success(){
        var successarr=[
            ‘勇敢坚毅真正之才智乃刚毅之志向。 —— 拿破仑‘,
            ‘志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。 —— 莎士比亚‘,
            ‘骏马是跑出来的，强兵是打出来的。‘,
            ‘只有登上山顶，才能看到那边的风光。‘,
            ‘如果惧怕前面跌宕的山岩，生命就永远只能是死水一潭。‘,
            ‘平时没有跑发卫千米，占时就难以进行一百米的冲刺。‘,
            ‘梯子的梯阶从来不是用来搁脚的，它只是让人们的脚放上一段时间，以便让别一只脚能够再往上登。‘,
            ‘没有激流就称不上勇进，没有山峰则谈不上攀登。‘,
            ‘真正的才智是刚毅的志向。 —— 拿破仑‘,
            ‘山路曲折盘旋，但毕竟朝着顶峰延伸。‘,
            ‘只有创造，才是真正的享受，只有拚搏，才是充实的生活。‘,
            ‘敢于向黑暗宣战的人，心里必须充满光明。‘,
            ‘种子牢记着雨滴献身的叮嘱，增强了冒尖的勇气。‘,
            ‘自然界没有风风雨雨，大地就不会春华秋实。‘,
            ‘只会幻想而不行动的人，永远也体会不到收获果实时的喜悦。‘,
            ‘勤奋是你生命的密码，能译出你一部壮丽的史诗。‘,
            ‘对于攀登者来说，失掉往昔的足迹并不可惜，迷失了继续前时的方向却很危险。‘,
            ‘奋斗者在汗水汇集的江河里，将事业之舟驶到了理想的彼岸。‘,
            ‘忙于采集的蜜蜂，无暇在人前高谈阔论。‘,
            ‘勇士搏出惊涛骇流而不沉沦，懦夫在风平浪静也会溺水。‘
        ];
        var num2=parseInt(Math.random()*19);
        $(".success>p").html(successarr[num2]);
        $(".shadow").css("height",$(window).height());
    }
    // 失败名言
    function fail(){
        var failarr=[
            ‘志在峰巅的攀登者，不会陶醉在沿途的某个脚印之中。‘,
            ‘海浪为劈风斩浪的航船饯行，为随波逐流的轻舟送葬。‘,
            ‘人生最重要的一点是，永远不要迷失自己。‘,
            ‘一个人承受孤独的能力有多大，他的能力就有多大。‘,
            ‘实力塑造性格，性格决定命运。‘,
            ‘普通人成功并非靠天赋，而是靠把寻常的天资发挥到不寻常的高度。‘,
            ‘对于强者，要关注他们的灵魂，对于弱者，他关注他们的生存。‘,
            ‘积极的人在每一次忧患中都看到一个机会，而消极的人则在每个机会都看到某种忧患。‘,
            ‘成功不是将来才有的，而是从决定去做的那一刻起，持续累积而成。‘,
            ‘当你感到悲哀痛苦时，最好是去学些什么东西。学习会使你永远立于不败之地。‘,
            ‘有的人一生默默无闻，有的人一生轰轰烈烈，甚至千古流芳，为什么会这样？因为默默无闻的人只是满足于现状，而不去想怎么轰轰烈烈过一生，不要求自己，去做，去行动，怎么能够成功？‘,
            ‘人性最可怜的就是：我们总是梦想着天边的一座奇妙的玫瑰园，而不去欣赏今天就开在我们窗口的玫瑰。‘,
            ‘在人生的道路上，即使一切都失去了，只要一息尚存，你就没有丝毫理由绝望。因为失去的一切，又可能在新的层次上复得。‘,
            ‘没有一劳永逸的开始；也没有无法拯救的结束。人生中，你需要把握的是：该开始的，要义无反顾地开始；该结束的，就干净利落地结束。‘,
            ‘生命的奖赏远在旅途终点，而非起点附近。我不知道要走多少步才能达到目标，踏上第一千步的时候，仍然可能遭到失败。但我不会因此放弃，我会坚持不懈，直至成功！‘,
            ‘不要认为只要付出就一定会有回报，这是错误的。学会有效地工作，这是经营自己强项的重要课程。‘,
            ‘苦心人天不负，卧薪尝胆，三千越甲可吞吴。有志者事竞成，破釜沉舟，百二秦川终属楚。‘,
            ‘生命本身是一个过程，成功与失败只是人生过程中一些小小的片段，若果把生命与成功或失败联系在一起，生命将失去本身该有的意义。‘,
            ‘我们不要哀叹生活的不幸，诅咒命运的不公。在命运面前，我们要做强者，掐住命运的咽喉，叩问命运，改变命运。‘,
            ‘努力和效果之间，永远有这样一段距离。成功和失败的唯一区别是，你能不能坚持挺过这段无法估计的距离。‘
        ];
        var num3=parseInt(Math.random()*19);
        $(".fail>p").html(failarr[num3]);
        $(".fail").show();
    }



})

完