原生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 相关文章推荐
JavaScript 拾漏补遗
Dec 27 Javascript
在模板页面的js使用办法
Apr 01 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 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的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
8个必备的PHP功能实例代码
2013/10/27 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
Python中Selenium模块的使用详解
2020/10/09 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
生日寿宴答谢词
2014/01/19 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
英语教育专业自荐信
2014/05/29 职场文书
社区植树节活动总结
2015/02/06 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python