原生js仿jquery animate动画效果


Posted in Javascript onJuly 13, 2016

jquery animate动画效果:

 原生js仿jquery animate动画效果

代码

<!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或者火狐浏览器,区别对待

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
js获取图片宽高的方法
Nov 25 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
webpack多页面开发实践
Dec 18 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 #Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 #Javascript
Javascript类型系统之undefined和null浅析
Jul 13 #Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 #Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 #Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 #Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 #Javascript
You might like
在普通HTTP上安全地传输密码
2007/07/21 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
Python简单实现控制电脑的方法
2018/01/22 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
python datetime中strptime用法详解
2019/08/29 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
一道Delphi上机题
2012/06/04 面试题
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
缴纳养老保险的证明
2014/01/10 职场文书
客户接待方案
2014/02/26 职场文书
学习型班组申报材料
2014/05/31 职场文书
课外小组活动总结
2014/08/27 职场文书
食品卫生管理制度
2015/08/06 职场文书
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android