DOMOHAHA
2016-02-19 21:08
function onmove(obj,json,fn){
clearInterval(obj.timer);
var oar=0;
obj.timer=setInterval(function(){
var flag=true; //假设
for(var attr in json){
if(attr=="opacity"){
oar=getStyle(obj,attr)*100;
}else{
oar=parseInt(getStyle(obj,attr));
}
var speed=oar<json[attr]?10:-10;
if(oar!=json[attr]){
flag=false; //假设全部都没有实现完成
}
if(attr=="opacity"){
obj.style[attr]=(oar+speed)/100;
obj.style.filter='Alpha(opacity:'+oar+speed+')';
}
else{
obj.style[attr]=oar+speed+'px';
}//要把这里的style.attr改成style[attr]
}
if(flag==true){ //全部都实现了
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}
//方法封装--获取属性
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];//IE浏览器
}else{
return getComputedStyle(obj,false)[attr];//火狐浏览器
}
}
第八行 oar=getStyle(obj,attr)*100;中getStyle(obj,attr)需要用parseFloat()函数转换为数字,再四舍五入提高准确度。oar=Math.round( parseFloat( getStyle(obj,attr) )*100);另外你的速度有问题,建议提高精确度采用缓冲动画,防止边缘抖动。
JS动画效果
113925 学习 · 1443 问题
相似问题