原生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 相关文章推荐
js中的cookie的读写操作示例详解
Apr 17 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
微信小程序生成海报分享朋友圈的实现方法
May 06 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 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开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
php批量修改表结构实例
2017/05/24 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
pandas的排序和排名的具体使用
2019/07/31 Python
pytorch中图像的数据格式实例
2020/02/11 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
分居协议书范本(律师见证版)
2014/11/26 职场文书
博士论文答辩开场白
2015/06/01 职场文书
小学四年级作文之写景
2019/08/23 职场文书
python 中yaml文件用法大全
2021/07/04 Python
python程序的组织结构详解
2021/12/06 Python
Elasticsearch 基本查询和组合查询
2022/04/19 Python
go goth封装第三方认证库示例详解
2022/08/14 Golang