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

 /*
物体多属性同时运动的函数
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运动缓冲的封装函数的更多相关文章

  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. 剑指OFFER的跳台阶问题

    一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法. (斐波那契数列的变形) F(1)=1;F(2)=2; F(n)=F(n-1)+F(n-2); class S ...

  2. [H5]API之range对象

    range对象:是一种fragment(HTML片断),它包含了节点或文本节点的一部分.一般情况下,同一时刻页面中只可能 有一个range,也有可能是多个range(使用Ctrl健进行多选,不过有的浏 ...

  3. css一长串连续英文字符的换行

    在标签内,中文的换行是没有什么问题的,但英文的换行就有问题.当出现一长串连续的英文字符时,换行就失效了,内容会溢出.解决这个问题只需要一行css就够了: p{ word-wrap: break-wor ...

  4. Andrew Ng机器学习课程笔记--week1(机器学习介绍及线性回归)

    title: Andrew Ng机器学习课程笔记--week1(机器学习介绍及线性回归) tags: 机器学习, 学习笔记 grammar_cjkRuby: true --- 之前看过一遍,但是总是模 ...

  5. org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.binding.BindingException: Parameter 'username' not found. Available parameters are [1, 0, param1, param2]

    Spring+mybatis错误:org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.bi ...

  6. MySQL、PHP入门

    登录MySQL     mysql -hlocalhost-uroot -proot 退出MySQL     exit 每条语句后必须加分号:----------------------------- ...

  7. JavaWeb(六)Listener监听器

    监听器 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上述事件后,监听器某个方法将立即被执行. Servlet监听器 在Se ...

  8. Windbg调试关键区(CriticalSection)死锁

    一. 准备工作 这里一个有关键区锁死问题的程序,运行之后依次点击"CS锁死"按钮.右上角退出按钮,程序就会卡死.(图1) 对于眼下的这个问题,界面完全失去响应,这说明负责消息处理的 ...

  9. WeQuant交易策略—RSI

    RSI指标策略 策略介绍 RSI(相对强弱指标),是通过一段时期内的平均收盘上涨和下跌数,计算价格上涨所产生的波动占整个波动的百分比,来分析市场买卖盘的意向和实力. 计算公式(以日为单位举例) RSI ...

  10. Spring(四)-- JdbcTemplate、声明式事务

    1.Spring提供的一个操作数据库的技术JdbcTemplate,是对Jdbc的封装.语法风格非常接近DBUtils.   JdbcTemplate可以直接操作数据库,加快效率,而且学这个JdbcT ...