克隆与运动框架的联合应用

效果：点击元素块后，元素块开始随机的向任何方向移动，并附带一堆颜色随机的“尾巴”。每个方向运动3秒后改变方向，同时笑脸变哭脸。

　　　如图所示：

朝某个方向运动使用的是js运动框架的思想，并通过round()函数调用自身实现不停移动的；而“尾巴”的产生则是通过每隔20ms克隆一次元素块，并在一秒后删除完成的。

具体代码如下：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         #box{

             width:600px;

             height: 600px;

             border:10px solid black;

             position: relative;

         }

         #box div{

             width: 100px;

             height: 100px;

             background: red;

             position: absolute;

             left: 0;

             top: 0;

             border-radius: 50%;

             font-size: 100px;

             line-height: 100px;

             text-align: center;

         }

     </style>

 </head>

 <body>

 <div id="box">

     <div>☺</div>

 </div>

 </body>

 </html>

 <script>

     //随机数

     function rnd(n, m) {

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

     }

     //获取样式

     function getStyle(obj, attr) {

         if (obj.currentStyle) {

             return obj.currentStyle[attr];

         } else {

             return getComputedStyle(obj, false)[attr];

         }

     }

     //运动框架

     function move(obj, time, json, fn) {

         var dis = {};

         var start = {};

         for (var name in json) {

             start[name] = parseInt(getStyle(obj, name));

             dis[name] = json[name] - start[name];

         }

         var count = Math.floor(time / 30);

         var n = 0;

         clearInterval(obj.timer);

         obj.timer = setInterval(function () {

             n++;

             for (var name in json) {

                 var cur = start[name] + dis[name] / count * n;

                 if (name == "opacity") {

                     obj.style.opacity = cur;

                     obj.style.filter = "alpha(opacity=" + cur * 100 + ")";

                 } else {

                     obj.style[name] = cur + "px";

                 }

             }

             if (n == count) {

                 clearInterval(obj.timer);

                 if (fn) fn();

             }

         }, 30)

     }

     window.onload = function() {

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

         var oDiv = oBox.getElementsByTagName("div")[0];

         var timer = null;

         //移动方向改变时变换一次表情

         function face(){

             oDiv.innerHTML = "☹";

             setTimeout(function () {

                 oDiv.innerHTML = "☺";

             }, 300);

         }

         //运动循环执行

         function round() {

             var a = rnd(0, 256);

             var b = rnd(0, 256);

             move(oDiv, 3000, {left: rnd(0, 500), top: rnd(0, 500)}, function () {

                 face();

                 round();

             })

         }

         //元素块点击之后开始执行

         oDiv.onclick = function () {

             var lMax = oBox.clientWidth - oDiv.offsetWidth;

             var tMax = oBox.clientHeight - oDiv.offsetHeight;

             round();

             //每隔20ms克隆一次

             timer = setInterval(function () {

                 var newDiv = oDiv.cloneNode(true);

                 oBox.insertBefore(newDiv, oDiv); //需要使用insertBefore，若是使用appendChild()会将原块覆盖

                 newDiv.style.opacity = "0.3";

                 newDiv.style.filter = "alpha(opacity = 30)";

                 //克隆元素块的背景色随机

                 newDiv.style.background = "rgb(" + rnd(0, 256) + "," + rnd(0, 256) + "," + rnd(0, 256) + ")";

                 //克隆的元素1秒之后删除

                 setTimeout(function () {

                     oBox.removeChild(newDiv);

                 }, 1000);

             }, 20);

         }

     }

 </script>
												


											
js运动框架之一条乱跑的虫子的更多相关文章
	

    
								
  1. 带无缝滚动的轮播图（含JS运动框架）
		
    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
    
		
    2. 
						
  2. js 运动框架及实例
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    3. 
						
  3. js运动框架逐渐递进版
		
    运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...
    
		
    4. 
						
  4. js运动框架之掉落的扑克牌（重心、弹起效果）
		
    玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图:    这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...
    
		
    5. 
						
  5. js运动框架完成块的宽高透明度及颜色的渐变
		
    了解了运动框架完成块元素的宽高和透明度的变化的原理,我想着写一个颜色的变化来练习一下,不想写了很长时间才写出来,跟各位分享一下. 颜色的变化是通过三元素渐变的方式完成的,通过构造json,使当前的颜色 ...
    
		
    6. 
						
  6. js运动框架 step by step
		
    开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); ...
    
		
    7. 
						
  7. JS运动框架的封装过程(一)
		
    给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...
    
		
    8. 
						
  8. 完美的js运动框架
		
    //完美运动框架, 对象,json,函数function move(obj,json,funEnd){clearInterval(obj.timer);//清除定时器obj.timer= setInt ...
    
		
    9. 
						
  9. js 运动框架-轻量级
		
    具体代码如下: function move(obj,json,sv,fnEnd){ //CSS样式值 function getStyle(obj,attr){ if(obj.currentStyle) ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. java mail使用qq邮箱发邮件的配置方法
			
    最近自己折腾了下Java中利用mai发送QQ邮件 1.QQ邮箱设置 1.1 进去QQ邮箱-->设置-->账号-->进行设置如下图 2.foxmail设置(由于我要利用它收邮件) 2. ...
    
			
    2. 
						
  2. Linux 网络配置
			
    1. 查看网卡型号: lspci | grep -i ethernet 上图中显示了网卡的具体型号,可以根据这个网卡型号在Intel官网下载Linux版本的驱动. 2. 以太网开机启动: 以太网的配置 ...
    
			
    3. 
						
  3. Matlab绘图函数一览
			
    要查看Matlab所有绘图函数,请从Matlab主界面菜单查看“绘图目录”,或从Matlab帮助文档查看“Types of MATLAB Plots”(在线版本).本文的图和英文解释摘自Matlab帮 ...
    
			
    4. 
						
  4. javax.el.PropertyNotFoundException:
			
    javax.el.PropertyNotFoundException: Property 'ContextPath' not found on type org.apache.catalina.cor ...
    
			
    5. 
						
  5. 2016.12.01 搭建dendroid备忘
			
    在2014年的时候看了freebuf的那篇,感觉很6,2014年搭了就一遍成功了,事过两年,物是人非啊,2016搞了云,没事测试,搞了一遍死活不成功,第二天测试成功,过程逗比坎坷,没什么难的 //环境 ...
    
			
    6. 
						
  6. PE文件格式 持续更新ing
			
    PE文件就是exe文件和dll文件,前者是可执行文件,后者是动态连接库文件.两者的区别仅仅是字面上的,唯一的区别就是内部的一个字段标识这个文件是exe文件还是dll文件. 对于PE文件格式,举一个例子 ...
    
			
    7. 
						
  7. JVM初学笔记
			
    JVM概念 JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的.  ...
    
			
    8. 
						
  8. mysql 联合索引和唯一索引
			
    一般来说.如果有where a=? and b=? and c=? 的语句. 如果表也有DML, 我一般只在a 上建索引.  这也是代价平衡的结果. 一方面 只在a 上建索引那么是 index ran ...
    
			
    9. 
						
  9. LeetCode() Basic Calculator  不知道哪里错了
			
    class Solution {public:    int calculate(string s) {        stack<int> num;        stack<ch ...
    
			
    10. 
						
  10. Invert Binary Tree
			
    Invert a binary tree: 4 / \ 2 7 / \ / \ 1 3 6 9 to 4 / \ 7 2 / \ / \ 9 6 3 1 简单递归实现,调换左右子树,子树的所有子树结构 ...
    
			
    11.