JavaScript 多属性缓冲运动
function animate(dom, obj, callback) {
for (var attr in obj) {
if (attr === 'opacity') {
var current = parseInt(getComputedStyle(dom, null)[attr] * 100);
var target = obj[attr] * 100;
} else if (attr.indexOf('scroll') !== -1) {
var current = dom[attr];
var target = obj[attr];
} else {
var current = parseInt(getComputedStyle(dom, null)[attr]);
var target = obj[attr];
}
obj[attr] = {
current: current,
target: target
}
}
clearInterval(dom.timer)
dom.timer = setInterval(function () {
var index = 0;
for (var key in obj) {
var current = parseInt(obj[key].current);
var target = obj[key].target;
var speed = (target - current) / 10 >= 0 ? Math.ceil((target - current) / 10) : Math.floor((target - current) / 10);
if (Math.abs(target - current) <= Math.abs(speed)) {
if (key === 'opacity') {
dom.style[key] = target / 100;
} else if (attr.indexOf('scroll') !== -1) {
dom[key] = target;
} else {
dom.style[key] = target + 'px';
}
delete obj[key];
for (var item in obj) {
index++;
}
if (!index) {
clearInterval(dom.timer);
typeof callback === 'function' ? callback() : ''
}
} else {
obj[key].current += speed;
if (key === 'opacity') {
dom.style[key] = current / 100;
} else if (attr.indexOf('scroll') !== -1) {
dom[key] = current;
} else {
dom.style[key] = current + 'px';
}
}
}
}, 20)
}
调用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body,html{
height: 3000px;
}
.box{
width: 80px;
height: 180px;
background-color: pink;
border-radius: 10px;
position: absolute;
right:10px;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="./js/tool.js"></script>
<script>
var box = document.querySelector(".box");
window.onscroll = function(ev){
var e = ev || event;
var s_top = document.body.scrollTop || document.documentElement.scrollTop;
animate(box,{top:s_top + document.documentElement.clientHeight/2-box.offsetHeight/2})
}
</script>
</body>
</html>