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 相关文章推荐
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 Javascript
解决Vue watch里调用方法的坑
Nov 07 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
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
用python代码做configure文件
2014/07/20 Python
python实现屏保计时器的示例代码
2018/08/08 Python
python批量创建指定名称的文件夹
2019/03/21 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
python 对xml解析的示例
2021/02/27 Python
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
个人简历自我评价八例
2013/10/31 职场文书
销售心得体会
2014/01/02 职场文书
环保倡议书400字
2014/05/15 职场文书
心理咨询承诺书
2014/05/20 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
恰同学少年观后感
2015/06/08 职场文书
高中体育课教学反思
2016/02/16 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
JAVA springCloud项目搭建流程
2022/05/11 Java/Android
nginx七层负载均衡配置详解
2022/07/15 Servers