面向对象式:

Element.prototype.animate=animate;
Element.prototype.getStyle=getStyle;
function animate(json,callback) {
clearInterval(this.timer);
for (var attr in json) {
var that = this;
this.timer = setInterval(function () {
if (attr == 'opacity') {
that.icur = Math.round(parseFloat(that.getStyle()[attr]) * 100);
} else {
that.icur = parseInt(that.getStyle()[attr]);
}
that.speed = (parseInt(json[attr]) - that.icur) / 10;
that.speed = that.speed > 0 ? Math.ceil(that.speed) : Math.floor(that.speed);
if (attr == 'opacity') {
that.style.filter = 'alpha(opacity:' + that.icur + that.speed + ')';
that.style.opacity = (that.icur + that.speed) / 100;
} else {
that.style[attr] = that.icur + that.speed + "px";
};
if(that.icur==parseInt(json[attr])){
//flags=true;
clearInterval(that.timer);
if(callback){
callback();
}
}
}, 20);
}
}
function getStyle() {
if (this.currentStyle) {
return this.currentStyle;
} else {
return document.defaultView.getComputedStyle(this, null);
}
}

  函数式:

// Element.prototype.animate=animate;
Element.prototype.getStyle = getStyle;
function animate(obj, json, callback) {
//var flags=false;
clearInterval(obj.timer); for (var attr in json) {
//var that = this;
var icur = 0, speed = 0;
obj.timer = setInterval(function () {
if (attr == 'opacity') {
icur = Math.round(parseFloat(obj.getStyle()[attr]) * 100);
} else {
icur = parseInt(obj.getStyle()[attr]);
}
speed = (parseInt(json[attr]) - icur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + icur + speed + ')';
obj.style.opacity = (icur + speed) / 100;
} else {
obj.style[attr] = icur + speed + "px";
};
if (icur == parseInt(json[attr])) {
//flags=true;
clearInterval(obj.timer);
if (callback) {
callback();
}
}
}, 20);
}
}
function getStyle() {
if (this.currentStyle) {
return this.currentStyle;
} else {
return document.defaultView.getComputedStyle(this, null);
}
}

javascript封装animate动画的更多相关文章

  1. JavaScript—封装animte动画函数

    封装Animte 动画函数 虽然可能以后的开发中可能根本不需要自己写,Jquery 给我们封装好了,或者用CSS3的一些属性达到这样的效果可能更简单. 我比较喜欢底层的算法实现,万变不离其中,这个逻辑 ...

  2. Js封装的动画函数实现轮播图

    ---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画         function ...

  3. 原生javascript封装动画库

    ****转载自自己发表于牛人部落专栏的文章**** 一.前言 本文记录了自己利用原生javascript构建自己的动画库的过程,在不断改进的过程中,实现以下动画效果: 针对同一个dom元素上相继发生的 ...

  4. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  5. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  6. 第一百四十五节,JavaScript,同步动画

    JavaScript,同步动画 将上一节的,移动透明动画,修改成可以支持同步动画,也就是可以给这个动画方法多个动画任务,让它同时完成 原理: 向方法里添加一个属性,这个属性是一个对象,同步动画属性,属 ...

  7. 【JavaScript 封装库】BETA 4.0 测试版发布!

    /* 源码作者: 石不易(Louis Shi) 联系方式: http://www.shibuyi.net =============================================== ...

  8. 原生Js封装的动画类

    算法用的是Tween类,需要研究的参考这篇文章: http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html 网页里常用的动画 放大 ...

  9. 原生javascript 实现 animate

    原生javascript 实现 animate //animate function getstyle(obj,name){ if(obj.currentStyle){ return obj.curr ...

随机推荐

  1. css3整理--calc()

    calc()语法: elem{ width:calc( 50% -2px ); } 取值说明: calc是计算的缩写,上句含义是:计算elem父元素的50%再减2px,并将结果赋值给elem的widt ...

  2. 解决Android SDK Manager无法更新下载

    Android Studio2.2版本有一个bug,当在gradle文件编写代码时,程序会自动同步编译,这时整个程序都处于页面卡顿状态,要等待很久才能缓过来.最近实在忍受不了这种龟速,刚好发现有了新的 ...

  3. 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验五:按键模块④ — 点击,长点击,双击

    实验五:按键模块④ - 点击,长点击,双击 实验二至实验四,我们一共完成如下有效按键: l 点击(按下有效) l 点击(释放有效) l 长击(长按下有效) l 双击(连续按下有效) 然而,不管哪个实验 ...

  4. Android摸索-二、解决Android SDK Manager下载太慢问题

    下载Android SDK Manger 那个速度…………   有了这个再也不用担心了 1.打开android sdk manager 2.打开tool->options 按图片中输入参数:mi ...

  5. 10.19stark组件开发(三)

    2018-10-19 15:42:15 2018-10-19 18:21:33 我觉得现在主要是学一种解决问题的思路,也就是逻辑或者说是算法!!!! 要有对代码的感触!要用面向对象对类进行封装!!Dj ...

  6. Thymeleaf 学习笔记-实例demo(中文教程)

    项目demo     http://pan.baidu.com/s/1wg6PC 学习资料网址  http://www.blogjava.net/bjwulin/archive/2013/02/07/ ...

  7. MySQL使用root用户授权出现错误ERROR 1045 (28000) at line 2: Access denied for user 'root'@'%' (using password: YES)解决办法

    参考:https://blog.csdn.net/open_data/article/details/42873827 使用MySQL的root用户登录出现错误提示 ERROR 1045 (28000 ...

  8. 如何移植freertos

    要素: 1.两个主要的文件夹移动 2.freertos_config 复制,决定了系统时钟启动位置 3. 启动汇编复制替换 4.it中断管理文件 的相关三个中断注释掉 5.复制delay文件,主要是s ...

  9. Hbase建表时遇到的问题This could be a sign that the server has too many connections

    Hbase创建表时遇到以下错误: ERROR: org.apache.hadoop.hbase.ZooKeeperConnectionException: HBase is able to conne ...

  10. Canonical form

    https://en.wikipedia.org/wiki/Canonical_form#Linear_algebra Suppose we have some set S of objects, w ...