原生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 相关文章推荐
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 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
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python文件路径名的操作方法
2019/10/30 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
jupyter 添加不同内核的操作
2021/02/06 Python
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
上班上网检讨书
2014/01/29 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
面试自我评价范文
2014/09/17 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
费用申请报告范文
2015/05/15 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
python基于机器学习预测股票交易信号
2021/05/25 Python
使用python求解迷宫问题的三种实现方法
2022/03/17 Python
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python