JS实现运动缓冲效果的封装函数示例


Posted in Javascript onFebruary 18, 2018

本文实例讲述了JS实现运动缓冲效果的封装函数。分享给大家供大家参考,具体如下:

之前经常写运动函数,要写好多好多,后来想办法封装起来。(运动缓冲)。

/*
  物体多属性同时运动的函数
  obj:运动的物体
  oTarget:对象,属性名为运动的样式名,属性值为样式运动的终点值
  ratio:速度的系数
*/
function bufferMove(obj, oTarget, fn,ratio = 8) {
  clearInterval(obj.iTimer);
  obj.iTimer = setInterval(function () {
    // 此处设定开关bBtn,假设所有的属性均已运动完毕true
    var bBtn = true;
    for(var sAttr in oTarget){
      // 获取当前值,此处兼容透明度的变化
      if(sAttr === 'opacity') {
        var iCur = parseFloat(getStyle(obj, sAttr) * 100);
      } else {
        var iCur = parseInt(getStyle(obj, sAttr));
      }
      // 计算速度,此处可判定方向,如向左或向右,先透明后出现或先出现后透明等
      var iSpeed = (oTarget[sAttr] - iCur) / ratio;
      iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
      // 计算下一次的值
      var iNext = iCur + iSpeed;
      // 赋值给对应样式
      if(sAttr ==='opacity') {
        obj.style.opacity = iNext / 100;
        obj.style.filter = 'alpha(opacity=' + iNext +')';
      } else {
        obj.style[sAttr] = iNext + 'px';
      }
      // 清除定时器,当前的位置和终点值是否相等,相等则说明结束
      if(iNext !== oTarget[sAttr]) {
        bBtn = false;
      }
    }
    // 如果bBtn的值为true,则说明所有的属性均已运动完毕,回调函数fn()
    if(bBtn) {
      clearInterval(obj.iTimer);
      if(fn){
        fn();
      }
    }
  }, 50);
}

以上封装函数也可以用于单个属性,多样式运动,比如:

bufferMove(obj,{"left":200,"width":400,"opacity":80},fn,8);

就这样。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js获取图片长和宽度的代码
Nov 24 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
javascript清空table表格的方法
May 14 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
js+canvas实现纸牌游戏
Mar 16 Javascript
element中el-container容器与div布局区分详解
May 13 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
Vue底层实现原理总结
Feb 17 #Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 #Javascript
图文介绍Vue父组件向子组件传值
Feb 17 #Javascript
JavaScript异步加载问题总结
Feb 17 #Javascript
js装饰设计模式学习心得
Feb 17 #Javascript
Vue组件库发布到npm详解
Feb 17 #Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 #Javascript
You might like
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
对python周期性定时器的示例详解
2019/02/19 Python
python判断自身是否正在运行的方法
2019/08/08 Python
python3获取url文件大小示例代码
2019/09/18 Python
python中property和setter装饰器用法
2019/12/19 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
动态密码技术
2012/10/18 面试题
大学生水文观测实习自我鉴定
2013/09/29 职场文书
职工运动会感言
2014/02/07 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
600字作文之感受大自然
2019/11/27 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python