面向对象式:

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. LeetCode - 872. Leaf-Similar Trees

    Consider all the leaves of a binary tree.  From left to right order, the values of those leaves form ...

  2. css3整理--background-size

    background-size语法: /*Mozilla*/ -moz-background-size: auto || <length> || <percentage> || ...

  3. 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验二:按键模块① - 消抖

    实验二:按键模块① - 消抖 按键消抖实验可谓是经典中的经典,按键消抖实验虽曾在<建模篇>出现过,而且还惹来一堆麻烦.事实上,笔者这是在刁难各位同学,好让对方的惯性思维短路一下,但是惨遭口 ...

  4. TestLink汉化操作

    实验环境版本 xampp-windows-x64-7.3.2-0-VC15-installer + testlink-1.9.19 汉化操作如下 打开testlink的配置文件F:\xampp\htd ...

  5. vue 实现聊天框滚动到底

    在需要出现滚动条的 DOM上添加 v-scroll 属性: <div class="chat-box" v-scroll="{auto: true}"&g ...

  6. Spring实战系列

    作者:arccosxy  转载请注明出处:http://www.cnblogs.com/arccosxy/ 稀里糊涂的做了2年的Java Web后端开发,很多东西连蒙带猜外加百度,也算是完成了几个重要 ...

  7. EF中的预先加载和延迟加载

    延迟加载(Lazy Loading):当实体第一次被读取时,相关数据不会被获取,只会读取本身.延迟加载的数据不会一次性查出来,而是一条一条的查询,这样就会多次请求数据库进行查询. 预先加载<Ea ...

  8. Docker容器集群管理之Swarm

    Docker容器集群管理主流方案 Swarm Docker公司自研发的集群管理系统. Kubernetes Google开源的一个容器集群管理系统,用于自动化部署.扩展和管理容器应用.也称为K8S ...

  9. 标准库 os、sys、logging、configparser、time、requests

    os : 与操作系统交互的模块 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当于 ...

  10. Linux系统下公式编辑器KLatexFormula

    方法1:源码安装 https://blog.csdn.net/ouening/article/details/79008636 方法2:通过apt-get 安装 首先安装libqt4-sql-sqli ...