js完美运动框架
程序员文章站
2022-03-27 13:06:26
...
// 完美运动框架:
function startMove(obj,json,complete){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var isYes = true;
for(var attr in json){
var iCur = null;
if(attr == 'opacity'){
iCur = parseInt(getStyle(obj,'opacity') * 100);
}else{
iCur = parseInt(getStyle(obj,attr));
}
var speed = (json[attr] - iCur) / 8;
speed = speed > 0? Math.ceil(speed): Math.floor(speed);
if(attr == 'opacity'){
iCur += speed;
obj.style.opacity = iCur / 100;
obj.style.filter = 'alpha(opacity=' + iCur + ')';
}else{
obj.style[attr] = iCur + speed + 'px';
}
if(iCur != json[attr]){
isYes = false;
}
}
if(isYes == true){
clearInterval(obj.timer);
if(complete){
complete.call(obj);
}
}
},30);
function getStyle(element,csstype){
return element.currentStyle ? element.currentStyle[cssType] : getComputedStyle(element)[cssType];
}
["获取样式的简单实现方法"](https://www.jb51.net/article/92551.htm)
}
上一篇: js运动(四)——链式运动及完美运动框架(元素多属性同时运动)
下一篇: 完美运动框架
推荐阅读
-
浅谈Node.js轻量级Web框架Express4.x使用指南
-
EpiiAdmin 开源的php交互性管理后台框架, 让复杂的交互变得更简单!Phper快速搭建交互性平台的开发框架,基于Thinkphp5.1+Adminlte3.0+Require.js。
-
运动拍档-中国移动智能运动手表W10让你轻装简行也完美
-
js是什么编程语言(java开发常用四大框架)
-
python flask框架实现传数据到js的方法分析
-
js框架之Vue框架简介
-
完美实现js焦点轮播效果(一)
-
完美实现js焦点轮播效果(二)(图片可滚动)
-
JavaScript运动框架 多值运动(四)
-
JavaScript运动框架 链式运动到完美运动(五)