js元素挨个掉落代码实例

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了元素挨个掉落效果。

点击一个元素就可以演示此功能。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
div {
position: absolute;
transform: rotateZ(360deg);
}
</style>
</head>
<body>
<script type="text/javascript">
var div = document.getElementsByTagName("div");
var len = 20;
var num = 0;
var timer = null;
var str = '';
for (var i = 0; i < len; i++) {
str += '<div style="width:50px;height:50px;background:purple;position:absolute;left:'
+ i * 60 + 'px;top:10px"></div>'
}
document.body.innerHTML = str;
document.onclick = function() {
timer = setInterval(function() {
move(div[num], {
top: 200
}, 500, 'linear')
num++;
if (num >= len) {
clearInterval(timer);
num = 0;
}
}, 200)
};
/*
* 调用:
*
*         move(obj, {left:10,top:20,opacity:0.8}, duration, fx, callback)
*
* 第二个参数里用键值对的形式,值没有单位,opacity的值为0-1
*
*/
function move(obj, attrs, duration, fx, callback) {
clearInterval(obj.timer);
var startTime = new Date().getTime();
var j = {};
for (var attr in attrs) {
j = {}
j.b = parseFloat(getComputedStyle(obj));
j.c = attrs - j.b;
}
var d = duration;
obj.timer = setInterval(function() {
var t = new Date().getTime() - startTime;
if (t >= d) {
t = d;
}
for (var attr in attrs) {
var b = j.b;
var c = j.c;
var value = Tween[fx](t, b, c, d);
if (attr == 'opacity') {
obj.style = value;
} else {
obj.style = value + 'px';
}
}
if (t == d) {
clearInterval(obj.timer);
if (typeof callback == 'function') {
callback.call(obj);
}
}
}, 16);
}
/*
* t : time 已过时间
* b : begin 起始值
* c : count 总的运动值
* d : duration 持续时间
* */
//Tween.linear();
var Tween = {
linear: function(t, b, c, d) { //匀速
return c * t / d + b;
},
easeIn: function(t, b, c, d) { //加速曲线
return c * (t /= d) * t + b;
},
easeOut: function(t, b, c, d) { //减速曲线
return -c * (t /= d) * (t - 2) + b;
},
easeBoth: function(t, b, c, d) { //加速减速曲线
if ((t /= d / 2) < 1) {
return c / 2 * t * t + b;
}
return -c / 2 * ((--t) * (t - 2) - 1) + b;
},
easeInStrong: function(t, b, c, d) { //加加速曲线
return c * (t /= d) * t * t * t + b;
},
easeOutStrong: function(t, b, c, d) { //减减速曲线
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeBothStrong: function(t, b, c, d) { //加加速减减速曲线
if ((t /= d / 2) < 1) {
return c / 2 * t * t * t * t + b;
}
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
},
elasticIn: function(t, b, c, d, a, p) { //正弦衰减曲线(弹动渐入)
if (t === 0) {
return b;
}
if ((t /= d) == 1) {
return b + c;
}
if (!p) {
p = d * 0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p / (2 * Math.PI) * Math.asin(c / a);
}
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
elasticOut: function(t, b, c, d, a, p) { //正弦增强曲线(弹动渐出)
if (t === 0) {
return b;
}
if ((t /= d) == 1) {
return b + c;
}
if (!p) {
p = d * 0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p / (2 * Math.PI) * Math.asin(c / a);
}
return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
},
elasticBoth: function(t, b, c, d, a, p) {
if (t === 0) {
return b;
}
if ((t /= d / 2) == 2) {
return b + c;
}
if (!p) {
p = d * (0.3 * 1.5);
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p / (2 * Math.PI) * Math.asin(c / a);
}
if (t < 1) {
return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) *
Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
}
return a * Math.pow(2, -10 * (t -= 1)) *
Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
},
backIn: function(t, b, c, d, s) { //回退加速(回退渐入)
if (typeof s == 'undefined') {
s = 1.70158;
}
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
backOut: function(t, b, c, d, s) {
if (typeof s == 'undefined') {
s = 3.70158; //回缩的距离
}
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
backBoth: function(t, b, c, d, s) {
if (typeof s == 'undefined') {
s = 1.70158;
}
if ((t /= d / 2) < 1) {
return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
}
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
},
bounceIn: function(t, b, c, d) { //弹球减振(弹球渐出)
return c - Tween['bounceOut'](d - t, 0, c, d) + b;
},
bounceOut: function(t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
}
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
},
bounceBoth: function(t, b, c, d) {
if (t < d / 2) {
return Tween['bounceIn'](t * 2, 0, c, d) * 0.5 + b;
}
return Tween['bounceOut'](t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
}
}
</script>
</body>
</html>

js元素挨个掉落代码实例,这样的场景在实际项目中还是用的比较多的,关于js元素挨个掉落代码实例就介绍到这了。

js元素挨个掉落代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容