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);
就这样。
JS运动缓冲的封装函数的更多相关文章
- JS运动框架的封装过程(一)
给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...
- js运动 缓冲运动
<!DOCTYPE HTML> <HTML> <meta http-equiv="Content-Type" content="text/h ...
- js 运动函数篇 (一) (匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动)层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...
- JS和JQUERY常见函数封装方式
JS中常用的封装函数4种方法: 1. 函数封装法: function box(){ } 2. 封装成对象 : let Cookie = { get(){ }, set(){ } } 3. 封装成构造函 ...
- js运动基础2(运动的封装)
简单运动的封装 先从最简单的封装开始,慢慢的使其更丰富,更实用. 还是上一篇博文的代码,在此不作细说. 需求:点击按钮,让元素匀速运动. <!DOCTYPE html> <html ...
- js 高程 22.1.4 函数绑定 bind() 封装分析
js 高程 书中原话(斜体表示): 22.1.4 函数绑定 另一个日益流行的高级技巧叫做函数绑定.函数绑定要创建一个函数,可以在特定的this 环境中 以指定参数调用另一个函数.该技巧常常和回调函数与 ...
- js cookie创建读取删除函数封装
js cookie创建读取删除函数封装 一.总结 都是为了方便操作,这样弄了很方便 1.创建cookie的函数封装的作用:方便设置过期时间expire,方便设置键和值 2.查询cookie的数据封装的 ...
- js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)
js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...
- 关于Ajax请求的JS封装函数
每次连接ajax都要重复写很多代码,所以写了一个JS封装函数,如下: 再来解释一下其中obj对象的参数形式: obj={ 'type':提交方式, get/post 'url' : 提交地址, ...
随机推荐
- C#多线程的用法1-简单示例
写在前面:阅读本系列文章即表示你已经知道什么是线程等理论知识,现在正想了解如何正确的使用线程进行编程工作. /// <summary> /// 单线程工作示例 /// </summa ...
- CentOS 7 服务器配置--安装Ftp
#安装vsftp yum install -y vsftpd #将 /etc/vsftpd/user_list文件和/etc/vsftpd/ftpusers文件中的root这一行注释掉 #root # ...
- Guava Cache源码解析
概述: 本次主要是分析cache的源码,基本概念官方简介即可. 基本类图: 在官方的文档说明中,Guava Cache实现了三种加载缓存的方式: LoadingCache在构建缓存的时候,使用buil ...
- 打造基于Clang LibTooling的iOS自动打点系统CLAS(二)
1. 配置LLVM和Clang 在这篇文章里,我们会基于上一篇所述的方案进行展开,详细讲解如何从0开始创建一个基于Clang LibTooling的编译器前端工具.在开始之前,我们假设你已经基本了解何 ...
- nodejs之express4x
学习node好榜样!前阵子看了php,那个模块化编译真的好棒.然而php学习起来不是一般的记不住,毕竟和js还是有不同的.于是转移到了node.看到熟悉的js脚本,心里踏实多了. 话不多讲,php我也 ...
- HTML特殊符号对照表 常用字符实体
前沿:阿飞表示虽然大部分都不常用,但是有些基本的还是要背下的,比如空格,大于,小于.^_^
- SpringMVC表单中post请求转换为put或delete请求
1.在web.xml文件中配置 <!-- HiddenHttpMethodFilter过滤器可以将POST请求转化为put请求和delete请求! --> <filter&g ...
- weblogic 启动问题
通过startWebLogic.cmd 手动启动weblogic可以成功启动 myeclipse配置后,runserver 就会报 Error occurred during initializati ...
- 手把手封装数据层之DButil数据库连接的封装
最近这段时间一直在用SSM框架做增删改查,突然想把以前还不会用框架的时候,综合百度和各种资料结合API文档抄袭而来的数据层的封装分享给大家.这边先封装一个DButil. 我这个封装就是烂大街的那种,没 ...
- js,jQuery实现可关闭悬浮框广告特效,兼容(谷歌,火狐,Ie)
注意不能直接用close()命名关闭广告函数,避免冲突. javascript实现方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...