原生js实现jquery函数animate()动画效果的简单实例


Posted in Javascript onAugust 21, 2016

通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以。个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果。


注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了。

函数里面有几个参数解释一下,

•obj, 函数的对象

•json, 数值对,形式{attr:”value”, attr: “value”},在这里是指要动画对象的运动属性

•interval, 每执行一次改变的间隔,这里改变的是对象是属性值

•sp, 值变换的速度,使动画具有缓冲效果,而不只是匀速不变(sp为1)的

•fn, 回调函数,执行完动画之后的行为

代码比较简单,只是有几个细节需要注意,在这里提醒一下:

•对象的属性不必直接声明,所以函数的第一句clearInterval(obj.timer);并不会报错。

•必须为每一个对象分别添加一个定时器,否则互相会影响,一个定时器公用的结果是定时器的多个对象运动出现卡顿。

•son数据格式了解一下,当遍历对象的动画属性的时候,需要icur != json[arr]判断是否每一个属性已经达到目标值。flag的作用是防止当其中某个属性第一个达到目标值后,clearInterval(obj.timer)清除了定时器,结果其他动画属性并没有达到目标值。所以在每次遍历的时候初始化flag值为true,只要遇到一个没有达到目标属性的对象,就将flag置为false,直至对象的所有属性达到目标值,清除定时器。

•speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);

这一句的作用是将属性值取整,因为属性值除了opacity没有小数。

•最后调用的时候注意动画的对象,在使用for循环的时候不能随意使用arr[i]形式,尤其是嵌套循环的时候i的值已经变成了最大值。

js

function animate(obj, json, interval, sp, fn) {
  clearInterval(obj.timer);
  //var k = 0;
  //var j = 0;
  function getStyle(obj, arr) {
    if(obj.currentStyle){
      return obj.currentStyle[arr];  //针对ie
    } else {
      return document.defaultView.getComputedStyle(obj, null)[arr]; 
    }
  }
  obj.timer = setInterval(function(){
    //j ++;
    var flag = true;
    for(var arr in json) {
      var icur = 0;
      //k++;
      if(arr == "opacity") {
        icur = Math.round(parseFloat(getStyle(obj, arr))*100);
      } else {
        icur = parseInt(getStyle(obj, arr));
      }
      var speed = (json[arr] - icur) * sp;
      speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
      if(icur != json[arr]){
        flag = false;
      } 
      if(arr == "opacity"){
        obj.style.filter = "alpha(opacity : '+(icur + speed)+' )";
        obj.style.opacity = (icur + speed)/100;
      }else {
        obj.style[arr] = icur + speed + "px";
      }
      //console.log(j + "," + arr +":"+ flag);
    }

    if(flag){
      clearInterval(obj.timer);
      //console.log(j + ":" + flag); 
      //console.log("k = " + k);
      //console.log("j = " + j);
      //console.log("DONE");
      if(fn){
        fn();
      }
    }
  },interval);
}

调用方式:

<script>
  var move = document.getElementById("move").getElementsByTagName("li");
  for(var i = 0; i < move.length; i ++){
    move[i].onmouseover = function(){
      var _this = this;
      animate(_this, {width: 500, height: 200},10, 0.01, function(){
        animate(_this, {width: 300, height: 200},10, 0.01);
      });

    }
  }

</script>

以上这篇原生js实现jquery函数animate()动画效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
Jquery $when done then的用法详解
May 20 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
JS实现多张图片预览同步上传功能
Jun 23 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 #Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 #Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 #Javascript
JSONP和批量操作功能的实现方法
Aug 21 #Javascript
全面解析标签页的切换方式
Aug 21 #Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 #Javascript
JS实现图片局部放大或缩小的方法
Aug 20 #Javascript
You might like
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
javascript之Partial Application学习
2013/01/10 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
Move.js入门
2017/02/08 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
python批量制作雷达图的实现方法
2016/07/26 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
Python中super函数的用法
2017/11/17 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
Python接口自动化测试的实现
2020/08/28 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
迟到检讨书800字
2014/01/13 职场文书
一年级班主任感言
2014/03/08 职场文书
大学生求职信范文
2014/05/24 职场文书
元旦晚会活动总结
2014/07/09 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
优秀团队申报材料
2014/12/26 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
大学同学聚会感言
2015/07/30 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记