原生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 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
微信小程序如何获取地址
Dec 24 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中MVC的开发经验分享
2012/05/17 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
php生成与读取excel文件
2016/10/14 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
javascript事件模型介绍
2016/05/31 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
整理Python中的赋值运算符
2015/05/13 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
python Django批量导入不重复数据
2016/03/25 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
Python 图片处理库exifread详解
2021/02/25 Python
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
党支部书记先进事迹
2014/01/17 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
英语教研活动总结
2014/07/02 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
大学运动会通讯稿
2015/07/18 职场文书
技术转让协议书
2016/03/19 职场文书
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang