原生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之通用简单的table选项卡实现(二)
May 09 Javascript
网页中CDATA标记的说明
Sep 12 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 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
PHP自动生成月历代码
2006/10/09 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
Python实现控制台进度条功能
2016/01/04 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
深入浅析Python传值与传址
2018/07/10 Python
TensorFlow实现Logistic回归
2018/09/07 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
新闻专业应届生求职信
2013/10/31 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
单位委托书范本
2014/04/04 职场文书
完整版商业计划书
2014/09/15 职场文书
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技