js运动框架之一条乱跑的虫子
克隆与运动框架的联合应用
效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的“尾巴”。每个方向运动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运动框架之一条乱跑的虫子的更多相关文章
- 带无缝滚动的轮播图(含JS运动框架)
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- js 运动框架及实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js运动框架逐渐递进版
运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...
- js运动框架之掉落的扑克牌(重心、弹起效果)
玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图: 这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...
- js运动框架完成块的宽高透明度及颜色的渐变
了解了运动框架完成块元素的宽高和透明度的变化的原理,我想着写一个颜色的变化来练习一下,不想写了很长时间才写出来,跟各位分享一下. 颜色的变化是通过三元素渐变的方式完成的,通过构造json,使当前的颜色 ...
- js运动框架 step by step
开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); ...
- JS运动框架的封装过程(一)
给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...
- 完美的js运动框架
//完美运动框架, 对象,json,函数function move(obj,json,funEnd){clearInterval(obj.timer);//清除定时器obj.timer= setInt ...
- js 运动框架-轻量级
具体代码如下: function move(obj,json,sv,fnEnd){ //CSS样式值 function getStyle(obj,attr){ if(obj.currentStyle) ...
随机推荐
- JavaScript闭包模型
JavaScript闭包模型 ----- [原创翻译]2016-09-01 09:32:22 < 一> 闭包并不神秘 本文利用JavaScript代码来阐述闭包,目的是为了使普通 ...
- CPU指令集
cpu作为一台电脑中的核心,它的作用是无法替代的.而cpu本身只是在块硅晶片上所集成的超大规模的集成电路,集成的晶体管数量可达到上亿个,是由非常先进复杂的制造工艺制造出来的,拥有相当高的科技含量. C ...
- Node调用C++(dll)
最近开始搞毕设了,打算用自己拿手的js来搞,但是仿佛入坑了,Node还不是很熟.总之,兵来将挡,水来土掩嘛,带着问题学习才是最高效的. 折腾1:Node 调用 C++ 刚开始,虽然我老师把dll文件给 ...
- 文本深度表示模型Word2Vec
简介 Word2vec 是 Google 在 2013 年年中开源的一款将词表征为实数值向量的高效工具, 其利用深度学习的思想,可以通过训练,把对文本内容的处理简化为 K 维向量空间中的向量运算,而向 ...
- centos 安装beanstalkd
You need to have the EPEL repo (http://www.servermom.org/2-cents-tip-how-to-enable-epel-repo-on-cent ...
- HTC One M7简易刷Recovery教程
HTC One M7作为当下HTC旗下的旗舰热门机,用户们对于刷机的需求都比较强烈,对于刷ROM的前提就是要刷入Recovery,当然作为安卓智能手机HTC one而言也不例外,最近有些用 ...
- 创建SO bapi
转自http://blog.sina.com.cn/s/blog_1647b3eff0102wi32.html 1.创建销售订单使用的BAPI BAPI_SALESORDER_CREATEFROMDA ...
- flume中的agent配置和启动
首先创建一个文件example.conf(touch example.conf) 然后在文件中,进行agent文件的如下的配置(vi example.conf) agent文件的配置:(配置ag ...
- WinForm DataGridView根据选中的行多删
private void btndel_Click(object sender, EventArgs e) { int count = 0; ...
- 使用canvas元素-art方法绘制圆弧
最近在学习HTML5,发现canvas真的很棒,canvas元素是一种可供绘图的平面,我们用JavaScript对它进行配置和操作.我这里说一下arc方法绘制圆弧,顺便提一下涉及到的基础知识. 首先看 ...