面向对象式:

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. 【class2src】Decompiler

    方法源自:https://stackoverflow.com/questions/272535/how-do-i-decompile-java-class-files 功能:给定一个.class文件, ...

  2. linux-Centos 7下tftp-server服务的安装与配置

    TFTP(Trivial File Transfer Protocol,简单文件传输协议)是TCP/IP协议族中的一个用来在客户机与服务器之间 进行简单文件传输的协议,提供不复杂.开销不大的文件传输服 ...

  3. tomcat如何在server.xml中配置contexts

    https://tomcat.apache.org/tomcat-8.5-doc/deployer-howto.html#A_word_on_Contexts 例如你的程序 名字是hello端口是80 ...

  4. 使用Python往手机发送短信(基于twilio模块)

    官网是https://www.twilio.com twilio的一句话介绍——提供SDK帮你连接世界上所有人,你可以很方便的调用他们提供的接口来给指定手机发短信,打电话. 首先在twilio的官网注 ...

  5. 洛谷P1182 数列分段【二分】【贪心】

    题目:https://www.luogu.org/problemnew/show/P1182 题意: 有n个数,要分成连续的m段.将每段中的数相加,问之和的最大值的最小值是多少. 思路: 和P1316 ...

  6. IAR 路径导致的错误

    Error while running "c:\ti\simplelink_cc2640r2_sdk_1_50_00_58\..\xdctools_3_50_03_33_core\xs&qu ...

  7. Spring 嵌套方法AOP不生效问题

    问题描述, 如下Abc定义为一个Bean, b()方法添加@TargetDatasource,定义切面DynamicDataSourceAspect,期望:调用a()方法,b()方法上的AOP拦截能生 ...

  8. MyBatis时间比较

    <if test="submitTime!=null and submitTime!=''"> AND DATE_FORMAT(sc.submit_time, '%Y- ...

  9. 《linux 文件目录》- touch/rm/mv/cat/head/tail/cp/mkdir/chmod/chown/find/locate/which/whereis

    一:基本 / 根目录下目录结构定义 /bin 常见的用户指令 ls/echo ...... 等 /boot 内核和启动文件 /dev 设备文件 /etc 系统和服务配置文件 /home 用户家目录 / ...

  10. jmeter发送https请求