javascript动画函数封装
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var leader = obj.offsetLeft;
var step = 10;//之前只能是正数 只能往右走
/*if (leader < target) {
step = step;
} else {
step = -step;
}*/
step = leader < target ? step : -step;
//if (leader != target) {
//Math.abs(target - leader) 当前位置到目标的距离
//当前位置到目标的距离如果很大 这一步迈出之后 到不了目标 或者正好到
// 就可以迈出这一步
if (Math.abs(target - leader) >= Math.abs(step)) {
leader = leader + step;
obj.style.left = leader + "px";
} else {
//就差一点儿了手动放到目标即可
obj.style.left = target + "px";
clearInterval(obj.timer);
}
}, 15);
}
javascript动画函数封装的更多相关文章
- javascript动画函数封装(升级版)
//把 任意对象 的 任意数值属性 改变为 任意的目标值 function animate(obj, json, fn) { clearInterval(obj.timer); obj.timer = ...
- 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)
移动端 css3 transition 动画 ,requestAnimationFrame 动画 对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...
- 原生javascript 基础动画函数封装(二)
<!DOCTYPE html> <html> <head> <title></title> <style type="tex ...
- 原生javascript 基础动画函数封装(一)
<!DOCTYPE html> <html> <head> <title></title> <style type="tex ...
- 【前端】Util.js-ES6实现的常用100多个javaScript简短函数封装合集(持续更新中)
Util.js (持续更新中...) 项目地址: https://github.com/dragonir/Util.js 项目描述 Util.js 是对常用函数的封装,方便在实际项目中使用,主要内容包 ...
- 移动端滑屏全应用【一】cssHandler操作基础动画函数封装
前言: 大家都知道,在移动端进行操作结点移动时,我们都会使用操作transform来代替top等用以提高性能,必要的时候还可开启3d加速.我们都会使用getComputedStyle来获取结点的最终样 ...
- js变速动画函数封装 回调函数及层级还有透明度
//点击按钮,改变宽度到达一个目标值,高度到达一个目标值 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { re ...
- javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽
运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...
- js 变速动画函数
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ...
随机推荐
- uva 1658 Admiral 【 最小费用最大流 】
拆点,每个点拆成 i,i' 在i 和i‘之间连一条费用为0,容量为1的边,就可以保证每个点只经过一次 特殊的点,1和n之间,,,n和2*n之间连一条费用为0,容量为2的边,可以求出两条路径 #incl ...
- Django 中的 csrf_token 与单元测试
Django 中的 csrf_token 与单元测试 在<Python Web开发:测试驱动方法>一书中作者使用的 Django 版本是 1.7,而我使用的是1.9.7版(官网已经更新到1 ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (6)自定义和扩展
https://segmentfault.com/a/1190000006815041 前面我们将 Metronic 的结构和源码大致浏览了一遍,Metronic 整个文件包有三百多兆,在实际项目中, ...
- MongoDB_基本操作
数据库操作 增加数据库 use db1 #如果数据库不存在,则创建数据库,否则切换到指定数据库 查询数据库 show dbs #可以看到,我们刚创建的数据库db1并不在数据库的列表中,要显示它我们需要 ...
- 企业级任务调度框架Quartz(5) Quartz的声明式配置
前序: 前面我们已经通过编程的方式实现了多个作业任务执行具体操作的演示:但具体到实际的时候,如果我们要在 Job 启动之后改变它的执行时间和频度,则必须去修改源代码重新编译,我们很难去以编程的 ...
- priority_deque作为Timer时间队列底层容器的一些思考
https://www.bbsmax.com/A/D854VkZxzE/ 设置底层容器可以分离出两个逻辑上独立的问题: >如何存储构成优先级队列(容器)的实际元素,以及>如何组织这些元素以 ...
- UNIX时间转换ASP代码.txt
'参数:strTime:要转换的时 间:intTimeZone:该时间对应的时区 '返回值:strTime相对于1970年1月1日午夜0点经过的秒数 '示例:ToUnixTime("2008 ...
- [noip2011 luogu1312] Mayan游戏(模拟)
原题:传送门 大模拟- 两个剪枝: 1.如果左边不为空就不往左边走(因为一定不如左边的移到右边优) 2.如果相邻两颜色相同不需移动 当然也有别的小剪枝(我没写)比如如果当前某一颜色剩余块数满足1< ...
- Oracle与Mysql内嵌游标的使用示例
Oracle 游标用For循环比较简单,Mysql也是最近才开始用,感觉稍微麻烦一点,下边直接上代码: ------------------------------------------------ ...
- ACdream 1229 Data Transmission
Data Transmission Special JudgeTime Limit: 12000/6000MS (Java/Others)Memory Limit: 128000/64000KB (J ...