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 ...
随机推荐
- 杭电1019 Least Common Multiple【求最小公倍数】
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1019 解题思路:lcm(a,b)=a*b/gcd(a,b) 反思:最开始提交的时候WA,以为是溢出了, ...
- SQL的类型转换
说到SQL类型转换,我们知道SQL是一个弱类型语言,所以可以做隐式的强制类型转换,下面记录一下这几天遇到的类型转换问题. 1.在SQL中,字符串类型与数字之间转换是不需要强制类型转换符的,如果字符串是 ...
- idea中SVN的运用
1.1.1 上传代码时可以指定忽略一些上传目录 1.1.2 设置项目上传的路径 1.1.3 解决上传路径中包含“svn”目录问题 上传 从 SVN 服务器中检出代码到工作空间
- VMware ESXi定制版(OEM ISO)资源下载(包含5.1\5.5\6.0)
一.VMware ESXi 5.1.0 update03 1.VMware-ESXi-5.1.0-Update3-2323236-hitachi-0400.iso(日立) 2.VMware-ESXi ...
- BZOJ 4827: [Hnoi2017]礼物 FFT_多项式_卷积
题解稍后在笔记本中更新 Code: #include <bits/stdc++.h> #define setIO(s) freopen(s".in","r&q ...
- 洛谷P3113 [USACO14DEC]马拉松赛跑Marathon_Gold 线段树维护区间最大值 模板
如此之裸- Code: #include<cstdio> #include<cstring> #include<cmath> #include<algorit ...
- 前端开发—Javascript
Javascript 语言简介: 语言规范: 注释:/ 这是单行注释 / /* 换行*/ 多行注释 结束符: :分号 语法基础 变量 变量声明 1 变量名可以是 数字 字母 下划线 $ 组成,不 ...
- postman测试实例--断言
postman测试实例--断言 让我们来看看postman测试的一些例子. 其中大部分是作为内部postman片段. 大多数测试是为单行的JavaScript语句一样简单. 只要你想一个请求,你可以有 ...
- Hadoop 技术笔记
Flume与Kafka Flume 是一个分布式,可靠的,可用的服务,有效的收集,聚合和移动海量的日志数据.它有一个简单而灵活的架构,基于流数据流.具有很好的冗余和容错性,以及可靠性和多故障转移和恢复 ...
- HDU2147 - kiki's game 【巴什博弈】
Recently kiki has nothing to do. While she is bored, an idea appears in his mind, she just playes th ...