克隆与运动框架的联合应用
效果：点击元素块后，元素块开始随机的向任何方向移动，并附带一堆颜色随机的“尾巴”。每个方向运动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>