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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
Add a Formatted Table to a Word Document
Jun 15 Javascript
JavaScript 应用技巧集合[推荐]
Aug 30 Javascript
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
vue的路由映射问题及解决方案
Oct 14 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
原生JS实现相邻月份日历
Oct 13 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
php存储过程调用实例代码
2013/02/03 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
班组安全员工作职责
2014/02/01 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
商业融资计划书
2014/04/29 职场文书
员工辞职信范文
2015/03/02 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
《鲸》教学反思
2016/02/23 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python