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

  1. /*
  2. 物体多属性同时运动的函数
  3. obj:运动的物体
  4. oTarget:对象,属性名为运动的样式名,属性值为样式运动的终点值
  5. ratio:速度的系数
  6. */
  7. function bufferMove(obj, oTarget, fn,ratio = 8) {
  8. clearInterval(obj.iTimer);
  9. obj.iTimer = setInterval(function () {
  10. // 此处设定开关bBtn,假设所有的属性均已运动完毕true
  11. var bBtn = true;
  12. for(var sAttr in oTarget){
  13. // 获取当前值,此处兼容透明度的变化
  14. if(sAttr === 'opacity') {
  15. var iCur = parseFloat(getStyle(obj, sAttr) * 100);
  16. } else {
  17. var iCur = parseInt(getStyle(obj, sAttr));
  18. }
  19. // 计算速度,此处可判定方向,如向左或向右,先透明后出现或先出现后透明等
  20. var iSpeed = (oTarget[sAttr] - iCur) / ratio;
  21. iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  22.  
  23. // 计算下一次的值
  24. var iNext = iCur + iSpeed;
  25.  
  26. // 赋值给对应样式
  27. if(sAttr ==='opacity') {
  28. obj.style.opacity = iNext / 100;
  29. obj.style.filter = 'alpha(opacity=' + iNext +')';
  30. } else {
  31. obj.style[sAttr] = iNext + 'px';
  32. }
  33.  
  34. // 清除定时器,当前的位置和终点值是否相等,相等则说明结束
  35. if(iNext !== oTarget[sAttr]) {
  36. bBtn = false;
  37. }
  38. }
  39. // 如果bBtn的值为true,则说明所有的属性均已运动完毕,回调函数fn()
  40. if(bBtn) {
  41. clearInterval(obj.iTimer);
  42. if(fn){
  43. fn();
  44. }
  45. }
  46. }, 50);
  47. }

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

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

就这样。

JS运动缓冲的封装函数的更多相关文章

  1. JS运动框架的封装过程(一)

    给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...

  2. js运动 缓冲运动

    <!DOCTYPE HTML> <HTML> <meta http-equiv="Content-Type" content="text/h ...

  3. js 运动函数篇 (一) (匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动)层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  4. JS和JQUERY常见函数封装方式

    JS中常用的封装函数4种方法: 1. 函数封装法: function box(){ } 2. 封装成对象 : let Cookie = { get(){ }, set(){ } } 3. 封装成构造函 ...

  5. js运动基础2(运动的封装)

    简单运动的封装 先从最简单的封装开始,慢慢的使其更丰富,更实用. 还是上一篇博文的代码,在此不作细说. 需求:点击按钮,让元素匀速运动. <!DOCTYPE html> <html ...

  6. js 高程 22.1.4 函数绑定 bind() 封装分析

    js 高程 书中原话(斜体表示): 22.1.4 函数绑定 另一个日益流行的高级技巧叫做函数绑定.函数绑定要创建一个函数,可以在特定的this 环境中 以指定参数调用另一个函数.该技巧常常和回调函数与 ...

  7. js cookie创建读取删除函数封装

    js cookie创建读取删除函数封装 一.总结 都是为了方便操作,这样弄了很方便 1.创建cookie的函数封装的作用:方便设置过期时间expire,方便设置键和值 2.查询cookie的数据封装的 ...

  8. js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)

    js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...

  9. 关于Ajax请求的JS封装函数

    每次连接ajax都要重复写很多代码,所以写了一个JS封装函数,如下: 再来解释一下其中obj对象的参数形式: obj={ 'type':提交方式,    get/post 'url' : 提交地址, ...

随机推荐

  1. C#多线程的用法1-简单示例

    写在前面:阅读本系列文章即表示你已经知道什么是线程等理论知识,现在正想了解如何正确的使用线程进行编程工作. /// <summary> /// 单线程工作示例 /// </summa ...

  2. CentOS 7 服务器配置--安装Ftp

    #安装vsftp yum install -y vsftpd #将 /etc/vsftpd/user_list文件和/etc/vsftpd/ftpusers文件中的root这一行注释掉 #root # ...

  3. Guava Cache源码解析

    概述: 本次主要是分析cache的源码,基本概念官方简介即可. 基本类图: 在官方的文档说明中,Guava Cache实现了三种加载缓存的方式: LoadingCache在构建缓存的时候,使用buil ...

  4. 打造基于Clang LibTooling的iOS自动打点系统CLAS(二)

    1. 配置LLVM和Clang 在这篇文章里,我们会基于上一篇所述的方案进行展开,详细讲解如何从0开始创建一个基于Clang LibTooling的编译器前端工具.在开始之前,我们假设你已经基本了解何 ...

  5. nodejs之express4x

    学习node好榜样!前阵子看了php,那个模块化编译真的好棒.然而php学习起来不是一般的记不住,毕竟和js还是有不同的.于是转移到了node.看到熟悉的js脚本,心里踏实多了. 话不多讲,php我也 ...

  6. HTML特殊符号对照表 常用字符实体

    前沿:阿飞表示虽然大部分都不常用,但是有些基本的还是要背下的,比如空格,大于,小于.^_^

  7. SpringMVC表单中post请求转换为put或delete请求

    1.在web.xml文件中配置  <!-- HiddenHttpMethodFilter过滤器可以将POST请求转化为put请求和delete请求! -->    <filter&g ...

  8. weblogic 启动问题

    通过startWebLogic.cmd 手动启动weblogic可以成功启动 myeclipse配置后,runserver 就会报 Error occurred during initializati ...

  9. 手把手封装数据层之DButil数据库连接的封装

    最近这段时间一直在用SSM框架做增删改查,突然想把以前还不会用框架的时候,综合百度和各种资料结合API文档抄袭而来的数据层的封装分享给大家.这边先封装一个DButil. 我这个封装就是烂大街的那种,没 ...

  10. js,jQuery实现可关闭悬浮框广告特效,兼容(谷歌,火狐,Ie)

    注意不能直接用close()命名关闭广告函数,避免冲突. javascript实现方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...