- // 完美运动框架, 对象, json, 函数
- function move(obj,json,funEnd){
- clearInterval(obj.timer);// 清除定时器
- obj.timer= setInterval(function(){// 同时开好几个对象定时器
- // 声明一个变量, 看下 JSON 中的属性点是已经达到 == 目标点是都已经完成
- var flag=true;// 设置一个初始值假设全部的属性都已经执行了完了
- for(var attr in json){// 使用 for 循环, 引出 json 中的各个目标点
- var currentAttr=0;// 声明一个变量, 主要存储原始点
- if(attr=="opacity"){// 如果 属性 ==opacity, 要另行考虑
- // 为了确保得到的数字是整数, 所以使用 Math.round, 后面是转义,*100 是因为 opacity 的值为小数
- currentAttr=Math.round(parseFloat(getStyle(obj,attr))*100);
- }
- else {
- currentAttr=parseInt(getStyle(obj,attr)); // 正常情况下的转义并赋值
- }
- var speed=(json[attr]-currentAttr)/10; // 声明变量, 获取速度 速度 =(目标点 - 原始点)/number
- speed=speed>0?Math.ceil(speed):Math.floor(speed); // 进行速度的取整 Math.ceil 向上取整 Math.floor 向下取整
- if(json[attr]!=currentAttr)// 如果 原始点!= 目标点 , 不停止运动
- {
- flag=false;
- }
- // if(json[attr]==currentAttr){
- // clearInterval(obj.timer);
- // if(funEnd)funEnd();
- // // if(funEnd){
- // // funEnd();
- // // }
- // }
- // else {
- if(attr=="opacity"){// 如果 目标点 ==opacity
- // currentAttr+=speed;
- obj.style.opacity=(currentAttr+speed)/100; // 使用下面的代码求出 opacity
- obj.style.filter='alpha(opacity:'+(currentAttr+speed)+')';
- }
- else {// 使用下面的代码求出 [attr] 也就是目标点的属性!
- obj.style[attr]=currentAttr+speed+"px";
- }
- // }
- } // 当所有的运动都完成后, 关闭定时器, 若有函数, 执行函数!
- if(flag){// 全部的属性已经执行
- clearInterval(obj.timer);
- if(funEnd)funEnd();
- }
- },30)
- }
- // 获取非行间的属性, 下面主要是为了兼容各个浏览器
- function getStyle(obj,name){
- if(obj.currentStyle){
- return obj.currentStyle[name];
- }
- else {
- return getComputedStyle(obj,false)[name];
- }
- }
- function getClass(oParent,className){
- var ele=oParent.getElementsByTagName("*");
- var arr=[];
- for(var i=0;i<ele.length;i++){
- if(ele[i].className==className){
- arr.push(ele[i]);
- }
- }
- return arr;
- }
来源: https://www.cnblogs.com/lulublog/p/8525624.html