2017-11-01
今天跟着Blue大神的视频学习时,把昨天写的任意值运动框架拿来用,发现添加的第四个函数参数一直不响应,大半天才发现昨天写的有错误,虽然看起来效果一样,但是在关闭定时器后面添加alert语句没反应。看了半天,才发现关闭定时器的判断条件写错了,obj.style[pro]得到的并不全是数字,还有px,要parseInt后再比较。前面页面没问题其实只是speed变为0,程序一直在运行,在叠加程序后加上alert语句,果然目标值达到后还是一直出来弹窗。
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
}
var timer = null;
function move(obj, pro, iTarget,fnEnd) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var cur = 0;
if (pro == "opacity") {
cur = Math.round(parseFloat(getStyle(obj, pro)) * 100);
}
else {
cur = parseInt(getStyle(obj, pro));
}
var speed = (iTarget - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//错误if (obj.style[pro]== iTarget)
if (parseInt(obj.style[pro])== iTarget)
//或者if(cur==iTarget)
{
clearInterval(obj.timer);
if (fnEnd) {
fnEnd();
}
}
else {
if (pro == "opacity") {
obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
obj.style.opacity = (cur + speed) / 100;
} else {
obj.style[pro] = cur + speed + "px";
// alert("a");
}
}
}, 30);
}
javascript命名前缀规范