JS链式运动框架---move.js
标签:
JavaScript
//startMove(obj,{attr1:itarget1,attr2:itarget2},fn)---JSON格式
fucntion startMove(obj,json,fn){
//fn——回调函数
var falg = true;//假设所有的目标值都到达了
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json){
//1)获取当前的值
var icur = 0;
if(attr == "opacity"){
//parseFloat返回小数值
//由于计算机存储小数有误差,采用Math.round()四舍五入得整数
icur = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur = parseInt(getStyle(obj,attr));
}
//2)计算速度
var speed = (json[attr] - icur)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//3)判断运动是否结束 ,检测停止
//只能判断到一个目标值达到,就停止检测了。
if(icur != json[attr]){ //假设有目标值没有到达
flag = false;
}
if(attr == "opacity"){
icur += speed;
obj.style.filter = "alpha(opacity:"+ icur +")";
obj.style.opacity = icur/100;
}else{
obj.style[attr] = icur + speed + "px";
}
}
if(flag){//flag=true,所有的目标值都到达
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}
//获取属性值
function getStyle(obj,attr){
if(obj.currentStyle){ //兼容IE浏览器
return obj.currentStyle[attr];
}else{ //兼容firefox浏览器
return getComputedStyle(obj,false)[attr];
}
}
点击查看更多内容
1人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦