function move(obj, attr, dir, target, endFn) {
clearInterval(obj.timer) //  避免全局变量,所以要用oBox.timer
dir = parseInt(getStyle(obj, attr)) < target ? dir : -dir
obj.timer = setInterval(function() {
var speed = parseInt(getStyle(obj, attr)) + dir //步长

if(speed > target && dir > 0 || speed < target && dir < 0) {
speed = target
}

obj.style[attr] = speed + "px" //当属性作为参数传进来时,不能直接.;要用[]

if(speed == target) {
clearInterval(obj.timer)
if(endFn) {
endFn()
}
}

}, 30)
}

function getStyle(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]
}

js-运动函数包的更多相关文章

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

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

  2. js 运动函数篇(二) (加速度运动、弹性运动、重力场运动(多方向+碰撞检测+重力加速度+能量损失运动)拖拽运动)层层深入

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

  3. JS里面的两种运动函数

    最新学了一个新的运动函数,与最初学习的有所不同,第一个运动是根据运动速度完成运动 ,第二个则是根据运动的时间来完成运动,而且把之前的函数都进行了一些兼容处理,在这里列出了看一下: 第一种animate ...

  4. JS运动缓冲的封装函数

    之前经常写运动函数,要写好多好多,后来想办法封装起来.(运动缓冲). /* 物体多属性同时运动的函数 obj:运动的物体 oTarget:对象,属性名为运动的样式名,属性值为样式运动的终点值 rati ...

  5. 原生JS封装时间运动函数

    /*讲时间运动之前先给大家复习一下运动函数 通常大家都会写运动框架,一个定时器(Timer),一个步长(step 就是每次运动的距离),一个当前位置(current)一个目标位置(target),然后 ...

  6. 运动函数封装(js)

    // 运动函数 function starMove(obj,json,fnEnd){ clearInterval(obj.timer); obj.timer  = setInterval(functi ...

  7. 如何用js自己实现Animate运动函数

    js运动是我们学习js必不可少的研究部分,首先我们要知道js的运动其实仅仅是不断改变元素的某个属性值而已,比如不断改变一个绝对定位div的left值,那么你看到的效果就是这个div不断的向右边运动,那 ...

  8. Jquery--JS的函数包

    Jquery-----JS的函数包,直接来调用方法. 一.基本知识 用法:把jquery-1.7.2.js直接复制到要做的网站项目中,拖拽引用和JS用法一样. 二.选择器 [1]基本: 1.取ID:v ...

  9. JS运动从入门到兴奋1

    hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...

  10. JS运动从入门到精髓!哈哈

    首先来看最基础的运动:单个物体向右匀速运动到某一点停止      例子:一个按钮,一个div,点击按钮,让div向右运动到某一个位置暂停 // 原理: 1 获取物体当前的位置 oDiv.offsetl ...

随机推荐

  1. nginx 返回数据不完整

    当nginx 代理解析大量数据流时,会把数据先放在自己的缓冲区,然后一并发给客户端 一次请求的数据量很大, 则会有一部分数据会被忽略掉 前端解析数据会有问题 致使页面白屏 nginx 返回数据不完整的 ...

  2. 60.纯 CSS 创作一块乐高积木

    原文地址:https://segmentfault.com/a/1190000015369542 感想:y轴旋转,相对定位,今天有点懵呀,唉. HTML code: <!-- 定义dom,容器中 ...

  3. ajax单删

    通过点击事件获取相应数据的id,将id传到的控制器,根据id执行删除的sql语句,执行官删除:同时ajax的有点就是快捷方便,无刷新,增强用户的体验. <?php namespace app\i ...

  4. 深入剖析GPU Early Z优化

    最近在公司群里同事发了一个UE4关于Mask材质的优化,比如在场景中有大面积的草和树的时候,可以在很大程度上提高效率.这其中的原理就是利用了GPU的特性Early Z,但是它的做法跟我最开始的理解有些 ...

  5. Java中锁的实现与内存语义

    目录 1. 概述 2. 锁的内存语义 3. 锁内存语义的实现 4. 总结 1. 概述 锁在实际使用时只是明白锁限制了并发访问, 但是锁是如何实现并发访问的, 同学们可能不太清楚, 下面这篇文章就来揭开 ...

  6. MySQL的show profile(已过时)简介以及该功能在MySQL 5.7中performance_schema中的替代

    本文出处:http://www.cnblogs.com/wy123/p/6979499.html show profile 命令用于跟踪执行过的sql语句的资源消耗信息,可以帮助查看sql语句的执行情 ...

  7. Python设计模式 - UML - 组件图(Component Diagram)

    简介 组件图又称构建图,用于显示系统各组件及各组件关系的物理视图. 组件图通常包括组件.接口.关系.端口和连接器,用来显示程序代码中相应的模块.源文件或源文件集合之间的依赖和泛化关系. 组件图中的组件 ...

  8. Sping Cloud hystrix.stream 自动发现-监控

    相关组件安装脚本 [root@java_gateway4 java_tps]# cat cront_install.sh #!/bin/bashyum install jq -ymkdir /home ...

  9. 丑数(python)

    题目描述 把只包含质因子2.3和5的数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含质因子7. 习惯上我们把1当做是第一个丑数.求按从小到大的顺序的第N个丑数.   # ...

  10. FloatingActionButton FAB 悬浮按钮

    FloatingActionButton简称FAB,这是一种比较美观的按钮: 1.使用前: FAB代表一个App或一个页面中最主要的操作,如果一个App的每个页面都有FAB,则通常表示该App最主要的 ...