原生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 相关文章推荐
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
深入理解node.js http模块
Jan 24 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
vue iview实现动态新增和删除
Jun 17 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生成16位随机数的代码(两种方法)
2014/09/16 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
总结Python编程中三条常用的技巧
2015/05/11 Python
详解Python中break语句的用法
2015/05/14 Python
Python抓取百度查询结果的方法
2015/07/08 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
Python延时操作实现方法示例
2018/08/14 Python
对python 自定义协议的方法详解
2019/02/13 Python
pandas计数 value_counts()的使用
2019/06/24 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
小学生自我鉴定
2013/10/12 职场文书
表扬信格式
2014/01/12 职场文书
网络教育自我鉴定
2014/02/04 职场文书
节约粮食标语
2014/06/18 职场文书
公务员考察材料
2014/12/23 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python