jquery动画
英雄难过棍子关小游戏可以带大家熟悉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(); } })
完
