效果

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画</title>

    <style>

        *{margin:0;padding:0;}

        .box{width: 400px;height: 300px;background: #000;margin:40px auto;color: #fff;font-size: 18px;text-align: center;}

    </style>

    <script>

    //获取对象样式规则信息，IE下使用currentStyle

    function getStyle(obj,style){

        return obj.currentStyle?obj.currentStyle[style]:getComputedStyle(obj,false)[style];

    }

    //原生js动画类似jquery--animate

    function animate(obj,styleJson,callback){

        clearInterval(obj.timer);

        // 开启定时器

        obj.timer=setInterval(function(){

            var flag=true;//假设所有动作都已完成成立。

            for(var styleName in styleJson){

                //1.取当前属性值

                var iMov=0;

                // 透明度是小数，所以得单独处理

                iMov=styleName=='opacity'?Math.round(parseFloat(getStyle(obj,styleName))*100):parseInt(getStyle(obj,styleName));

                //2.计算速度

                var speed=0;

                speed=(styleJson[styleName]-iMov)/8;//缓冲处理，这边也可以是固定值

                speed=speed>0?Math.ceil(speed):Math.floor(speed);//区分透明度及小数点，向上取整，向下取整

                //3.判断是否到达预定值

                if(styleJson[styleName]!=iMov){

                    flag=false;

                    if(styleName=='opacity'){//判断结果是否为透明度

                        obj.style[styleName]=(iMov+speed)/100;

                        obj.style.filter='alpha(opacity:'+(iMov+speed)+')';

                    }else{

                      obj.style[styleName]=iMov+speed+'px';

                    }

                }

            }

            if(flag){//到达设定值，停止定时器，执行回调

                clearInterval(obj.timer);

                if(callback){callback();}

            }

        },30)

    }

    window.onload=function(){

        document.getElementById('box').onclick=function(){

            var oThis=this;

            animate(oThis,{'width':'500'},function(){

                animate(oThis,{'height':'400'},function(){alert('宽度高度都增加了')});

            });

        }

    }

    </script>

</head>

<body>

    <div class="box" id="box">点击效果：宽度增加->高度增加->弹出框</div>

</body>

</html>

注意点

1.动画前要先停止原来的定时器，不然绑定多个对象的话会冲突

2.定时器的id要区分开，不能重叠，这里我直接那绑定对象的 对象来赋值  obj.timer

3.要判断所要执行的动画，是否全部到了设定值=> flag，全部执行完再停止定时器再执行回调函数

4.javascript的数据类型转换问题

alert(0.07*100);

//弹出7.000000000000001

注意：Javascript在存储时并不区分number和float类型，而是统一按float存储。而javascript使用IEEE 754-2008 标准定义的64bit浮点格式存储number，按照IEEE 754的定义：

decimal64对应的整形部分长度为 10,小数部分长度为16，所以默认的计算结果为“7.0000000000000001”，如最后一个小数为0，则取1作为有效数字标志。

5.传入的json数据不能带px，例如｛'width':'300px'｝，为了兼容透明度的数值，没想到好的处理方式，有没有大神指导下...

6.该定时器做了缓冲处理，变化越来越慢，想要快速的效果或者匀速的效果，只需要在2.计算速度那块做下处理就可以

7.不兼容css3的属性,只兼容了（width,height,top,left,right,bottom,opacity）

8.获取对象样式的信息，要判断IE或者火狐浏览器，区别对待

原生js仿jquery--animate效果的更多相关文章

  1. 原生js仿jquery一些常用方法

    原生js仿jquery一些常用方法 下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   最近迷上了原 ...

  2. 【转】原生js仿jquery一些常用方法

    现在利用扩展原型的方法实现一些jquery函数: 1.显示/隐藏 ? 1 2 3 4 5 6 7 8 9 10 //hide() Object.prototype.hide = function(){ ...

  3. [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件

    jquery插件一般是这么干的: $.fn.插件名称 = function(){}, 把插件的名称加在.fn上,在源码里面实际上是扩展到构造函数的原型对象上,如果你没看过jquery的源代码,或者你曾 ...

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

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

  5. 用原生js模仿jquery

    阅读声明:本文档仅供学习,由于个人能力有限,文档中有错漏的地方还请指出,大家共同学习. 目前在学习怎么样写jquery,模仿阶段,有兴趣的同学可以和我一起学习,共同交流,在学习的路上希望有你做伴. 在 ...

  6. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  7. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  8. 原生js替换jQuery各种方法-中文版

    原文https://github.com/nefe/You-D... 原生JS与jQuery操作DOM对比 You Don't Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好 ...

  9. 【前端性能】必须要掌握的原生JS实现JQuery

    很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...

  10. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

随机推荐

  1. 调试存储过程时提示ORA-20000: ORU-10027: buffer overflow

    下午的时候在 PL/SQl Developer 10.0.5.1710 上调试壹個存储过程,在调试的时候使用了比较多的 DBMS_OUTPUT.PUT_LINE 作为打印日志的方式,结果没过多久 PL ...

  2. 转: css3动画简介以及动画库animate.css的使用

    ~~~ transition  animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...

  3. (C#)Windows Shell 外壳编程系列7 - ContextMenu 注册文件右键菜单

    原文 (C#)Windows Shell 外壳编程系列7 - ContextMenu 注册文件右键菜单 (本系列文章由柠檬的(lc_mtt)原创,转载请注明出处,谢谢-) 接上一节:(C#)Windo ...

  4. github 的分支操作

    首先需要当前目录设置为仓库目录 一.创建本地分支 1.查看有哪些分支:git branch 2.创建一个分支:git branch name  ,其中name是分支名 3.切换到分支:git chec ...

  5. android 构建数据库SQLite

    1.首先我们需要一个空白的eclipse android工程 2.然后修改AndroidManifest.xml 在<application></application>标签里 ...

  6. windows上放弃使用PyGTK

    windows上放弃使用PyGTK - riag的专栏 - 博客频道 - CSDN.NET windows上放弃使用PyGTK 分类: python 2010-03-31 16:47 1054人阅读 ...

  7. cocos2d基础篇笔记四

    1.//有两种集合 //第一种是array 特点:插入,删除效率低,可是查找效率高 //另外一种是list  特点:插入,删除效率高,可是查找效率低 //分析这个游戏: 插入的时候:怪物,射弹出现时, ...

  8. 小编辑 Java 中十进制和十六进制的相互转换

    1 2 3 4 5 // 十进制转化为十六进制,结果为C8. Integer.toHexString(200);   // 十六进制转化为十进制,结果140. Integer.parseInt(&qu ...

  9. BZOJ3231(矩阵连乘，稍有点复杂)

    题目:3231: [Sdoi2008]递归数列 题意: 一个由自然数组成的数列按下式定义:   对于i <= k:ai = bi 对于i > k: ai = c1ai-1 + c2ai-2 ...

  10. ORACLE分科目统计每科前三名的学生的语句

    有个成绩表 score(student_no,Subject_no,Score)分别为学号,课程号,成绩.我想用语句查询出每科的前三名学生的学号,请各位高手教教小弟 1.创建测试语句:create t ...