原生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 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
js 实现复制到粘贴板的功能代码
May 13 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
基于canvas实现手写签名(vue)
May 21 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
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
Python的垃圾回收机制深入分析
2014/07/16 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
小学生开学感言
2014/02/28 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
经济管理专业求职信
2014/06/09 职场文书
违纪检讨书
2015/01/27 职场文书
2016入党心得体会范文
2016/01/06 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
Mysql事务索引知识汇总
2022/03/17 MySQL
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers