在编写多块同时触发运动的时候,发现一个BUG,
timer = setInterval(show, 30);本来show是一个自定义函数,
当设为timer = setInterval(show(one,two), 30);时,发现show里面的参数one和two无法被导入,所以需要做以下代码改进和优化
原版的html和css代码在这里javascript动画效果之缓冲动画
js代码如下
<script>
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
} window.onload = function() { //自定义变量
var pto = $("div");
var btn = $("show");
var timer = null;
var speed = 0; //鼠标移动进入绑定事件
btn.onmouseenter = function() {
//调用自定义函数,并传入参数0
showPto(0);
}
//鼠标移动离开绑定事件
btn.onmouseleave = function() {
//同理,并传入参数-200
showPto(-200);
} //自定义函数,自定义参数名
function showPto(obj) {
//当前只需要一个定时器,所以需要在每次开始前清除定时器
clearInterval(timer);
//定义定时器,自动增减
timer = setInterval(function() {
//obj为0时(0--200)/20,speed为+10,Math.ceil(),此时pto.offsetLeft变0
//onj为-200时(-200-0)/20,speed为-10,所以Math.floor()
speed = (obj - pto.offsetLeft) / 20;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (pto.offsetLeft == obj) {
//当pto.offsetLeft为0或者-200时,清除定时器
clearInterval(timer);
} else {
//通过speed来增加减少offsetLeft的值
pto.style.left = pto.offsetLeft + speed + 'px';
}
}, 30);
} }
</script>