//把 任意对象 的 任意数值属性 改变为 任意的目标值
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. [翻译]开源PostgreSQL监控工具OPM

    一个好消息:九月,PostgreSQL OPM开发小组发布了开源的PostgreSQL数据库监控套件的第一个RELEASE版本OPM v2.3.PostgreSQL是先进的高级数据库,但它的一个重要的 ...

  2. Windows平台上使用ANT编译Hadoop Eclipse Plugin

    一.准备工作:   1.安装JDK 下载页面:http://www.oracle.com/technetwork/java/javase/downloads/index.html JDK6,JDK7都 ...

  3. PythonOpenCV--Rtrees随机森林

    360确实很个性,哈哈,你个貔貅,只吃不吐! Rtrees介绍!参考链接:http://docs.opencv.org/modules/ml/doc/random_trees.html 原文链接:Py ...

  4. layui 时间控件 单击 年直接赋值

    在 //选中 lay(ul).find('li').on('click', function(){  //结尾处添加 if (options.done === "year") { ...

  5. 优动漫PAINT个人版和EX版本差异

    优动漫PAINT是一款功能强大的动漫绘图软件,适用于个人和专业团队创作,分为个人版和EX版,那么这两个版本有什么区别,应该如何去选择呢? 优动漫PAINT个人版即可满足基本的绘画创作需求,EX版在个人 ...

  6. 操作ajax生成页面的一个问题

    一般而言,js代码都放在页面的底部.在做项目的过程中,发现放在底部的代码没有执行,原来操作的是ajax生成的部分.这时候,页面加载js的顺序就要小心了.例子如下: <!doctype html& ...

  7. BZOJ 1305: [CQOI2009]dance跳舞 网络最大流_二分答案_建模

    Description 一次舞会有n个男孩和n个女孩.每首曲子开始时,所有男孩和女孩恰好配成n对跳交谊舞.每个男孩都不会和同一个女孩跳两首(或更多)舞曲.有一些男孩女孩相互喜欢,而其他相互不喜欢(不会 ...

  8. Centos7下 yum安装php扩展

    linux下, 使用thinkphp的模板标签,如 eq, gt, volist defined, present , empty等 标签时, 报错: used undefined function ...

  9. Docker:分布式系统的软件工程革命(上)

    转自:http://cxwangyi.github.io/story/docker_revolution_1.md.html Docker:分布式系统的软件工程革命(上) 作者:王益 最后更新:201 ...

  10. Project Euler 26 Reciprocal cycles( 分数循环节 )

    题意: 单位分数指分子为1的分数.分母为2至10的单位分数的十进制表示如下所示: 1/2 =  0.5 1/3 =  0.(3) 1/4 =  0.25 1/5 =  0.2 1/6 =  0.1(6 ...