//把 任意对象 的 任意数值属性 改变为 任意的目标值
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. 搭建 Lepus 天兔 监控MySQL

    Part1: Lepus安装需要Lamp环境,lepus官网手册也建议采用XAMPP的方式安装,lepus也是在XAMPP上进行研发的 注意xampp会把apache,mysql,php都安装,所以要 ...

  2. String,StringBuffer,StringBuilder效率优先关系说明

    String,StringBuffer,StringBuilder效率优先关系说明: public class StringBufferWithStringBuilder { public stati ...

  3. 记我安装Caffe的血泪史(1)

    Caffe的安装我主要参考的是这篇博客 http://blog.csdn.net/ubunfans/article/details/47724341 按照他的方法我很快就安好了cuda8(为后面安装了 ...

  4. max 宏定义取消:error C2589: error C2059: 语法错误 : “::”

    原文链接:http://blog.csdn.net/danelumax2/article/details/9172465有修改! 一:关于Pcl和WIndef的冲突: 1. 错误输出 ./zlibra ...

  5. win 7环境下java环境变量的配置

    http://www.cnblogs.com/zhj5chengfeng/archive/2013/01/01/2841253.html %Java_Home%\bin;%Java_Home%\jre ...

  6. sass揭秘之@if,@for,@each(转载)

    因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习. 经过上两篇揭秘,大家心里对sass应该有了很好的认知感了,这篇文章基于前面两 ...

  7. 小白学习Spark系列三:RDD常用方法总结

    上一节简单介绍了Spark的基本原理以及如何调用spark进行打包一个独立应用,那么这节我们来学习下在spark中如何编程,同样先抛出以下几个问题. Spark支持的数据集,如何理解? Spark编程 ...

  8. Linux 查看用户命令

    1.Linux里查看所有用户 (1)在终端里.其实只需要查看 /etc/passwd文件就行了. (2)看第三个参数:500以上的,就是后面建的用户了.其它则为系统的用户. 或者用cat /etc/p ...

  9. Linux设备驱动--块设备(四)之“自造请求”(转)

    前面, 我们已经讨论了内核所作的在队列中优化请求顺序的工作; 这个工作包括排列请求和, 或许, 甚至延迟队列来允许一个预期的请求到达. 这些技术在处理一个真正的旋转的磁盘驱动器时有助于系统的性能. 但 ...

  10. phthon中的open函数模式

    原文地址:http://www.runoob.com/python/python-func-open.html r 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. rb 以二进制格式 ...