js运动框架
发布日期:2022-02-22 18:04:19 浏览次数:4 分类:技术文章

本文共 1806 字,大约阅读时间需要 6 分钟。

参照网上写了一个运动框架

支持对象的width,height,left,top...,透明度动画效果

// 对一个对象的多个属性实现动画  function animate(obj,json,fun){    clearInterval(obj.timer);    var fre = json['frequence'] || 10;  //给对象添加添加一个频率 ,默认10    delete json['frequence'];  //用完即删,因为其并不是需要加动画的属性    obj.timer = setInterval(function(){        // 遍历json格式对象        var flag = true; //用来判断是否停止定时器        for(var attr in json){            // 判断属性是否是透明度,取值范围不同            var curStyle = 0;           if(attr == "opacity"){                curStyle = parseInt(getStyle(obj,attr))*100;               }else{                curStyle = parseInt(getStyle(obj,attr));    //必须用parseInt(),否则有bug抖动           }            var tarStyle = parseInt(json[attr]);            var step = (tarStyle - curStyle) / fre; //步长/速度            step = step > 0 ? Math.ceil(step) : Math.floor(step);   //step最终都会等于0            // 判断属性是否是透明度            if(attr == "opacity"){                obj.style[attr] = (curStyle + step)/100;                obj.style.filter = "alpha(opacity = "+ (curStyle + step) +")";            }else if(attr == "zIndex"){                obj.style.zIndex = tarStyle;            }else{                                obj.style[attr] = curStyle + step + "px";            }                       // 如果有一个动画没有执行完,就不能停止定时器            if(curStyle != json[attr]){                flag = false;            }        }        if(flag){            clearInterval(obj.timer);            if(fun){                fun();  //执行回调函数            }                    }    },16);}// 获取元素样式function getStyle(obj,attr){    if(obj.currentStyle){        return obj.currentStyle[attr];  //ie8及以下    }else{        return window.getComputedStyle(obj,null)[attr]; //非ie8及以下    }}

 

支持的参数,

obj:对象

json:json格式的对象,用于传递多个要设置动画的属性

fun:动画执行完,要执行的回调函数,可不写

 

转载于:https://www.cnblogs.com/Ryan777/p/10524830.html

转载地址:https://blog.csdn.net/dianshanban9429/article/details/101311490 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:eclipse使用Data Source Explorer连接SQLite数据库
下一篇:jQuery动态创建的dom对象不能绑定事件的解决方法

发表评论

最新留言

关注你微信了!
[***.104.42.241]2024年03月18日 16时49分34秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

html抽奖代码_JavaScript高手之路:封装抽奖效果 2019-04-21
hadoop 3.3 一直停留在running wordcount_蛋价持续下跌,今日跌破3.3元大关!深秋季节价格还能反弹吗?... 2019-04-21
的流程图做完后如何保存_2019超火的半永久眉是哪款?做完后我们如何护理?... 2019-04-21
去除logo 高德地图api_深圳品牌logo升级如何保持原型的同时更具创新? 2019-04-21
二重积分转换成极坐标_二重积分转换极坐标r的范围如何确定? 2019-04-21
python中倒背如流_八字基础知识--倒背如流篇 2019-04-21
以太坊地址和公钥_以太坊地址是什么 2019-04-21
linux查看wifi信号命令_linux – 获取WIFI信号强度 – 寻求最佳方式(IOCTL,iwlist(iw)等)... 2019-04-21
npm 不重启 全局安装后_解决修复npm安装全局模块权限的问题 2019-04-21
vs格式化json 不生效_vs code 格式化 json 配置 2019-04-21
go 字符串反序列化成对象数组_Fastjson 1.2.24反序列化漏洞深度分析 2019-04-21
onmessage websocket 收不到信息_WebSocket断开重连解决方案,心跳重连实践 2019-04-21
hibernate mysql 缓存_hibernate和mysql的缓存问题,没辙了! 2019-04-21
abp框架 mysql_ABP框架使用Mysql数据库 2019-04-21
mysql树形递归删除_使用递归删除树形结构的所有子节点(java和mysql实现) 2019-04-21
linux mysql 不能连接远程_linux mysql 远程连接 2019-04-21
mysql $lt_mongodb中比较级查询条件:($lt $lte $gt $gte)(大于、小于)、查找条件... 2019-04-21
install python_Install python on AIX 7 2019-04-21
PHP字符串运算结果,PHP运算符(二)"字符串运算符"实例详解 2019-04-21
PHP实现 bcrypt,如何使php中的bcrypt和Java中的jbcrypt兼容 2019-04-21