玩过电脑自带纸牌游戏的同志们应该都知道，游戏过关后扑克牌会依次从上空掉落，落下后又弹起，直至“滚出”屏幕。

　　效果如图：　　　　　　  

　　这个案例的具体效果就是：点击开始运动，纸牌会从右上角掉落下来，之后弹起，运动的速度会逐渐减慢，直到越出屏幕后，全部纸牌消失，在右上角会重新出现一张纸牌，继续动作，一再往复。

　　具体代码如下：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>掉落</title>

     <style>

         body{

             overflow: hidden;

             background: greenyellow;

         }

         div{

             width: 71px;

             height: 95px;

             position: absolute;

             top: 10px;

         }

     </style>

 </head>

 <body>

     <input id="btn" type="button" value="开始运动">

     <div id="box" class="box">

         <img src="data:images/A.jpg" width="71" height="95">

     </div>

 </body>

 </html>

 <script>

     //点击按钮，扑克片重复下落

     window.onload = function(){

         var oBtn = document.getElementById("btn");

         var oBox = document.getElementById("box");

         //初始扑克牌位置，在可视区的右上角

         oBox.style.top = 10 + "px";

         oBox.style.left=document.documentElement.clientWidth - oBox.offsetWidth + "px";

         //随机数

         function rnd(m,n){

             return parseInt(Math.random()*(m-n)+n);

         }

         //下落碰撞的运动框架

         function addMove(){

             //初始扑克牌位置，仍在可视区的右上角

             oBox.style.left=document.documentElement.clientWidth - oBox.offsetWidth + "px";

             oBox.style.top = 10 + "px";

             //初始左右移动的初始速度

             var iSpeedX = -rnd(6,20);

             var iSpeedY = rnd(6,20);

             var timer = null;

             clearInterval(timer);

             timer = setInterval(function(){

                 iSpeedY += 3; //速度逐渐加快

                 var l = oBox.offsetLeft + iSpeedX;

                 var t = oBox.offsetTop + iSpeedY;

                 //当扑克牌碰撞到可视区上部或底部时，速度要发生相应的变化

                 if(t>=document.documentElement.clientHeight - oBox.offsetHeight){ //当扑克牌碰撞底部一次

                     iSpeedY *= -0.8;  //速度降为原来的80%，并且变向

                     t=document.documentElement.clientHeight - oBox.offsetHeight

                 }else if(t<=0){ //当扑克牌碰撞顶部一次

                     iSpeedY *= -1; //速度变向

                     t=0;

                 }

                 //当速度的绝对值小于1时，直接为0

                 if(Math.abs(iSpeedY)<1){

                     iSpeedY = 0;

                 }

                 //赋值扑克牌的新位置

                 oBox.style.left = l + "px";

                 oBox.style.top = t + "px";

                 //随时克隆扑克牌，在扑克牌移动的过程中留下克隆出来的信息

                 var oNewBox = oBox.cloneNode(true);

                 oNewBox.setAttribute("index","new"); //通过setAttribute区分克隆出来的元素和最初的元素，为了接下来的删除做准备

                 oNewBox.style.background = "green";

                 oNewBox.style.left = l + "px";

                 oNewBox.style.top = t + "px";

                 document.body.insertBefore(oNewBox,oBox); //新科隆的扑克牌插在之前，否则会盖住原来的移动

                 //当扑克牌移动出可视区的时候，运动停止

                 if(oBox.offsetLeft < -oBox.offsetWidth){

                     iSpeedX = 0;

                     clearInterval(timer);

                     //将克隆出来的元素全部删除，只保留最初的扑克牌

                     var aBox = document.getElementsByTagName("div");

                     for(var i=0;i<aBox.length;i++){

                         if(aBox[i].getAttribute("index") == "new"){  //删除index=new的元素，即克隆出来的扑克牌，保留最初的扑克牌

                             document.body.removeChild(aBox[i]);

                             i--; //元素删除后会影响i值，所以需要i--

                         }

                     }

                     addMove();

                 }

             },30)

         }

         oBtn.onclick = function(){

             addMove();

         }

     }

 </script>

js运动框架之掉落的扑克牌（重心、弹起效果）的更多相关文章

  1. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  2. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  3. js 运动框架及实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js运动框架逐渐递进版

    运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...

  5. js运动框架完成块的宽高透明度及颜色的渐变

    了解了运动框架完成块元素的宽高和透明度的变化的原理,我想着写一个颜色的变化来练习一下,不想写了很长时间才写出来,跟各位分享一下. 颜色的变化是通过三元素渐变的方式完成的,通过构造json,使当前的颜色 ...

  6. js运动框架 step by step

    开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); ...

  7. JS运动框架的封装过程(一)

    给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...

  8. 完美的js运动框架

    //完美运动框架, 对象,json,函数function move(obj,json,funEnd){clearInterval(obj.timer);//清除定时器obj.timer= setInt ...

  9. js 运动框架-轻量级

    具体代码如下: function move(obj,json,sv,fnEnd){ //CSS样式值 function getStyle(obj,attr){ if(obj.currentStyle) ...

随机推荐

  1. [GodLove]Wine93 Tarining Round #10

    比赛链接: http://www.bnuoj.com/v3/contest_show.php?cid=4159 题目来源: lrj训练指南---几何算法 Flag ID Title   A Board ...

  2. UILabel加载HTML

    NSString *string1 = @"<font color = \"red\">什么情况</font><br/>"; ...

  3. PHP explode()函数

    源起:将日期格式的字符串拆分成年.月.日,用于组织关系介绍信的特定位置打印.感谢倪同学提供思路 定义和用法 explode()函数把字符串分割为数组 语法 explode(separator,stri ...

  4. bootstrap总结

    bootstrap在reset.css文件中设置margin为0,因此其他的标签需要重新设计margin. 1.h <h>标签和普通使用方法一样. 定义了.h1~.h6六个类名,样式和标题 ...

  5. CoInitialize浅析二

    最近工作比较忙,在粗略分析了CoInitialize之后我们一直没有再深入研究,下面言归正传.前面我们初步了解到了CoInitialize其实是通过调用CoInitializeEx来实现功能的,而后者 ...

  6. 07——为多态基类声明为virtual析构函数

    当基类确定被继承的时候,析构函数声明为virtual是必须的 当返回的派生类的指针或引用的时候,调用析构函数容易发生内存泄漏 当基类作为抽象类使用,声明pure virtual析构函数 析构函数的顺序 ...

  7. Chp10 10.7

    <Java语言程序设计>P296 本章是关于对象的思考,主要是在研究面向对象的程序设计时类的设计,作业写得比较杂乱,构造方法时没有严格遵守类的流行设计风格,由于是作业,再加上比较简单,没有 ...

  8. ion-refresher 下拉更新数据

    使用指令ion-refresher可以为容器eg:ion-scroll 和 ion-content进行拉动刷新 <ion-scroll> <ion-refresher on-refr ...

  9. linux系统下根据端口查看进程

    第一步:lsof -i:端口号 第二步:根据显示的pid号,查询对应应用程序. ps -ef | grep pid (这里的pid是:23466)

  10. codeforces Simple Molecules

    link:http://codeforces.com/contest/344/problem/B 刚开始想复杂了.一开始就想当然地以为可以有多个点,其实,人家题目要求只有3个点啊! 然后题目就简单了. ...