面向对象式:

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. OpenGL——折线图柱状图饼图绘制

    折线图绘制代码: #include<iostream> //旧版本 固定管线 #include<Windows.h> #include <GL/glut.h> // ...

  2. mysqldump命令的安装

    author:headsen   chen date:2019-03-14  11:31:00 安装:yum -y install mysql-client / apt-get install mys ...

  3. php reids 单机命令

    一.Redis连接与认证 //连接参数:ip.端口.连接超时时间,连接成功返回true,否则返回false $ret = $redis->connect('127.0.0.1', 6379, 3 ...

  4. yii2优化 - 开启 Schema 缓存

    开启 Schema 缓存 Schema 缓存是一个特殊的缓存功能,每当你使用活动记录时应该要开启这个缓存功能.如你所知, 活动记录能智能检测数据库对象的集合(例如列名.列类型.约束)而不需要手动地描述 ...

  5. 网络通信协议五之IP协议详解

    网络层协议 >>IP协议 >>ARP(地址解析协议) >>RARP(反向地址解析协议) >>ICMP(互联网控制消息协议) IP协议功能 >> ...

  6. AJAX里使用的弹窗样式 tanchuang.js tanchuang.css

    tanchuang.js // 每个弹窗的标识 var x =0; var idzt = new Array(); var Window = function(config){ //ID不重复 idz ...

  7. <target>.ID 和 <source>.ID 的属性冲突: DataType 属性不匹配

    ORACLE数据库主键的数据类型为number ,如果不指定长度会有 Merge报 <target>.ID 和 <source>.ID 的属性冲突: DataType 属性不匹 ...

  8. 初探Spring Cloud Config

    Spring Cloud Config提供了分布式系统中配置功能的服务端与客户端支持.对于不同环境的应用程序它的服务端提供了一种中心化的配置管理方式.并且其不仅适用于Spring的应用程序,其它语言开 ...

  9. 阿里云容器服务与ASP.NET Core部署:用 docker secrets 保存 appsettings.Production.json

    这是我们使用阿里云容器服务基于 docker 容器部署 asp.net core 应用遇到的另一个问题 —— 如果将包含敏感信息的应用配置文件 appsettings.Production.json ...

  10. ubuntu16.04下安装opencv3.4.1及其扩展模块

    1.源文件下载 opencv-3.4.1.tar.gz(https://github.com/opencv/opencv/releases) opencv_contrib-3.4.1.tar.gz(h ...