原生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 EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
AngularJS中的模块详解
Jan 29 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
瀑布流的实现方式(原生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执行速度全攻略
2006/10/09 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
jQuery 工具函数学习资料
2010/04/29 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
JS中的作用域链
2017/03/01 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
js实现for循环跳过undefined值示例
2019/07/02 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
python正则表达式re之compile函数解析
2017/10/25 Python
python进行文件对比的方法
2018/12/24 Python
python读取几个G的csv文件方法
2019/01/07 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
幼师自荐信
2013/10/26 职场文书
给校长的建议书600字
2014/05/15 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL