javascript动画函数封装（升级版）

  //把 任意对象 的 任意数值属性 改变为 任意的目标值function animate(obj, json, fn) {clearInterval(obj.timer);obj.timer = setInterval(function () {var flag = true;for (var k in json) {if (k === "opacity") {//opacity要特殊处理//opacity没有单位 参与运算自动转换成数值 所以不用parsetInt//取值范围 0-1 0.1 0.33 33 为了让以前的计算公式生效 要扩大100倍var leader = getStyle(obj, k) * 100;var target = json[k] * 100;var step = (target - leader) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);leader = leader + step;obj.style[k] = leader / 100;//opacity没有单位} else if (k === "zIndex") {obj.style.zIndex = json[k];//层级不需要渐变 直接设置即可} else {var leader = parseInt(getStyle(obj, k)) || 0;var target = json[k];var step = (target - leader) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);leader = leader + step;obj.style[k] = leader + "px";}if (leader != target) {flag = false;}}if (flag) {clearInterval(obj.timer);if (fn) {fn();}}}, 15);}//全部属性都到达目标值才能清空function getStyle(obj, attr) {if (window.getComputedStyle) {return window.getComputedStyle(obj, null)[attr];} else {return obj.currentStyle[attr];}}

转载于:https://www.cnblogs.com/lsy0403/p/5882786.html

javascript动画函数封装（升级版）相关推荐

JavaScript 之网页特效篇（offset系列、client系列、scroll系列、动画函数封装、常见网页特效）
网页特效 1.元素偏移量 offset 系列 offset 翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置可以获取 ...
05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
简单的动画函数封装（2）
<div></div><button class="btn1"> ...
最终的动画函数封装（2）
<button>点击触发1</button><button>点击触发2</button><div></div> <styl ...
简单的动画函数封装（1）
//创建简单的动画函数封装效果(目标对象,目标位置) function animate(obj,target){var id = setInterval(function(){if(obj.offse ...
PC端网页特效二：mouseenter 和 mouseover 的区别、动画函数封装
目录 5.mouseenter 和 mouseover 的区别 6.动画函数封装动画实现原理简单动画函数封装动画函数给不同元素记录不同定时器缓动效果原理动画函数多个目标值之间移动缓动函 ...
移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）...
移动端 css3 transition 动画 ,requestAnimationFrame 动画对于性能的要求,h5优先考虑: 移动端单页有时候制作只用到简单的css3动画即可,我们封装一下, ...
javascript深拷贝函数封装
在javascript,python这种带引用类型的高级程序设计语言中,很容易出现浅拷贝而导致错误. 本篇文章,我浅述一下我对js中深拷贝函数封装的思考. 思路很简单,封装一个递归函数,终止条件是'不 ...
动画函数封装 —— 筋头云图案跟随鼠标移动
要求利用动画函数做动画效果思路原先筋斗云的起始位置是0 鼠标经过某个 li,把当前 li 的 offsetLeft 位置做为目标值即可鼠标离开某个 li,就把目标值设为 0 如果点击了某个 l ...

javascript动画函数封装（升级版）

javascript动画函数封装（升级版）相关推荐

最新文章

热门文章