//把 任意对象 的 任意数值属性 改变为 任意的目标值
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];
}
}

javascript动画函数封装(升级版)的更多相关文章

  1. javascript动画函数封装

    function animate(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function () { var ...

  2. 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

  3. 原生javascript 基础动画函数封装(二)

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  4. 原生javascript 基础动画函数封装(一)

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  5. 【前端】Util.js-ES6实现的常用100多个javaScript简短函数封装合集(持续更新中)

    Util.js (持续更新中...) 项目地址: https://github.com/dragonir/Util.js 项目描述 Util.js 是对常用函数的封装,方便在实际项目中使用,主要内容包 ...

  6. 移动端滑屏全应用【一】cssHandler操作基础动画函数封装

    前言: 大家都知道,在移动端进行操作结点移动时,我们都会使用操作transform来代替top等用以提高性能,必要的时候还可开启3d加速.我们都会使用getComputedStyle来获取结点的最终样 ...

  7. js变速动画函数封装 回调函数及层级还有透明度

    //点击按钮,改变宽度到达一个目标值,高度到达一个目标值 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { re ...

  8. javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽

    运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...

  9. js 变速动画函数

    //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ...

随机推荐

  1. ssh 免密码登入远程服务器

    生成ssh密钥,将公钥上传至远程服务器~/.ssh目录下面(没有的话就建一个): ssh-keygen -t rsa scp ~/.ssh/id_rsa.pub root@yourserver.com ...

  2. 解决strip: Unable to recognise the format of the input file问题

    前言   在编译xilinx的uboot的时候出现了一个问题,始终报错:“strip: Unable to recognise the format of the input file `gen_et ...

  3. 认识优动漫PAINT,优动漫PAINT基本功能有哪些?

    优动漫PAINT是一款搭载了绘制漫画.插画所需所有功能的软件.拥有笔感自然真实.表现形式多样的画笔工具,及高效.完美.便捷的上色工具等. 本文将通过由优动漫PAINT描绘的作品为例,简单介绍该软件的功 ...

  4. Asp.net Core 源码-PagedList<T>

    using System.Collections.Generic; using System.Linq; using System; using System.Linq.Expressions; us ...

  5. jQuery中cookie使用方法

    <script type="text/javascript"> $(function () { var content=$.cookie('text');  //得到c ...

  6. idea 解决git冲突

    1.提交本地代码到本地仓库 2.啦取远程代码 不进行merge 3.冲突文件会显示   >>> head  ===== 4.删除  >>> head  ===== ...

  7. redis_2 数据类型

    1.key Redis keys 命令 下表给出了与 Redis 键相关的基本命令: 序号 命令及描述 1 DEL key该命令用于在 key 存在时删除 key. 2 DUMP key 序列化给定 ...

  8. Mongodb学习总结(1)——常用NoSql数据库比较

    虽然SQL数据库是非常有用的工具,但经历了15年的一支独秀之后垄断即将被打破.这只是时间问题:被迫使用关系数据库,但最终发现不能适应需求的情况不胜枚举. 但是NoSQL数据库之间的不同,远超过两 SQ ...

  9. easyui获取当前点击对象tabs的title和Index

    观察上面打开的tabs选项卡,肯定会有一个目前是被选中状态,而这个状态的class属性也肯定是和其他tabs不一样的,有个class等于tabs-selected的 var title = $('.t ...

  10. Spring事务管理 与 SpringAOP

    1,Spring事务的核心接口 Spring事务管理的实现有许多细节,如果对整个接口框架有个大体了解会非常有利于我们理解事务,下面通过讲解Spring的事务接口来了解Spring实现事务的具体策略.  ...