效果

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>动画</title>
  6. <style>
  7. *{margin:0;padding:0;}
  8. .box{width: 400px;height: 300px;background: #000;margin:40px auto;color: #fff;font-size: 18px;text-align: center;}
  9. </style>
  10. <script>
  11. //获取对象样式规则信息,IE下使用currentStyle
  12. function getStyle(obj,style){
  13. return obj.currentStyle?obj.currentStyle[style]:getComputedStyle(obj,false)[style];
  14. }
  15. //原生js动画类似jquery--animate
  16. function animate(obj,styleJson,callback){
  17. clearInterval(obj.timer);
  18. // 开启定时器
  19. obj.timer=setInterval(function(){
  20. var flag=true;//假设所有动作都已完成成立。
  21. for(var styleName in styleJson){
  22. //1.取当前属性值
  23. var iMov=0;
  24. // 透明度是小数,所以得单独处理
  25. iMov=styleName=='opacity'?Math.round(parseFloat(getStyle(obj,styleName))*100):parseInt(getStyle(obj,styleName));
  26.  
  27. //2.计算速度
  28. var speed=0;
  29. speed=(styleJson[styleName]-iMov)/8;//缓冲处理,这边也可以是固定值
  30. speed=speed>0?Math.ceil(speed):Math.floor(speed);//区分透明度及小数点,向上取整,向下取整
  31.  
  32. //3.判断是否到达预定值
  33. if(styleJson[styleName]!=iMov){
  34. flag=false;
  35. if(styleName=='opacity'){//判断结果是否为透明度
  36. obj.style[styleName]=(iMov+speed)/100;
  37. obj.style.filter='alpha(opacity:'+(iMov+speed)+')';
  38. }else{
  39. obj.style[styleName]=iMov+speed+'px';
  40. }
  41. }
  42. }
  43. if(flag){//到达设定值,停止定时器,执行回调
  44. clearInterval(obj.timer);
  45. if(callback){callback();}
  46. }
  47. },30)
  48. }
  49. window.onload=function(){
  50. document.getElementById('box').onclick=function(){
  51. var oThis=this;
  52. animate(oThis,{'width':'500'},function(){
  53. animate(oThis,{'height':'400'},function(){alert('宽度高度都增加了')});
  54. });
  55. }
  56.  
  57. }
  58.  
  59. </script>
  60. </head>
  61. <body>
  62. <div class="box" id="box">点击效果:宽度增加->高度增加->弹出框</div>
  63. </body>
  64. </html>

注意点

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

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

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

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

  1. alert(0.07*100);
  2. //弹出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. 同时安装VS2010,VS2012

    >LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏用vs2010打开工程,同时电脑上安装了高版本的VS,vs2012(vs2013)时会出现这 ...

  2. Select specified items from Tuple List

    #Select specified items from Tuple List ##Select one item to form list `tupleList.Select(element =&g ...

  3. 第三章 线性表(C#实现)

    1.线性表 概念::零个或多个数据元素的有序序列. 描述: 2.线性表的抽象数据类型: ADT线性表 Data:线性表的数据对象集合为{a1,a2,...,an},每个元素的类型均为DataType. ...

  4. commview for wifi 破解无线

    相信了解无线网络的读者都知道安全性是无线网络的先天不足,正是因为他的传播通过空气,所以信号很容易出现外泄问题,相比有线网络来说信号监听变得非常简单. 部分用户通过WEP加密的方式来保护网络通讯数据包避 ...

  5. Sightseeing Cows(最优比率环)

    Sightseeing Cows Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8915   Accepted: 3000 ...

  6. 解决外贸电商难题,PayPal中国外贸电商大会圆满礼成

        在全球经济一体化的背景下,越来越多的中国企业将目光转移到了海外.对中国的企业而言,要想将生意做到海外大致有两种方法可供选择,一是到海外设立分支机构或者分公司,二是通过外贸电子商务平台实现交易. ...

  7. OFbiz--HelloWorld

    上篇博客<OFbiz--简单介绍>我们介绍了OFbiz是什么,以下我们就開始用OFbiz开发我们的第一个程序--HelloWorld. 过程例如以下: 首先在hot-deploy下新建文件 ...

  8. Delete website with command.

    1.AppCmd.exe 2.http://www.windowsnetworking.com/articles-tutorials/windows-server-2008/Configuring-I ...

  9. c#关于EXCEL导入数据库的做法

    以下例子转载:互联网 先在类中定义一个方法名为ExecleDs的方法,用于将Excel表里的数据填充到DataSet中,代码如下 public DataSet ExecleDs(string file ...

  10. JavaSE学习总结第06天_Java语言基础2 & 面向对象1

      06.01 二维数组概述和格式1的讲解 二维数组概述:二维数组其实就是一个元素为一维数组的数组 格式1:数据类型[][] 变量名 = new 数据类型[m][n]; m表示这个二维数组有多少个一维 ...