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 ...
随机推荐
- redis的跳跃表
跳跃表是一种插入.查询.删除的平均时间复杂度为O(nlogn)的数据结构,在最差情况下是O(n),当然这几乎很难出现. 和红黑树相比较 最差时间复杂度要差很多,红黑树是O(nlogn),而跳跃表是O( ...
- Flex元素布局规则总结,以及布局和容器
一.Flex中的元素分类从功能层面可以把Flex中的元素分为组件(Components)和容器(Containers)两大类:组件 - 是指那类具有明确交互或数据展示功能的元素,例如Button.Ch ...
- jemeter参数化读取文件
1.新建一个123.csv文件 如图 2.添加http请求 3.添加一个查看结果树 二.通过函数助手 (1)打开函数助手 ......... 在json属组中引入变量 这是别人参考的
- 洛谷P1739 表达式括号匹配
题目描述 假设一个表达式有英文字母(小写).运算符(+,-,*,/)和左右小(圆)括号构成,以"@"作为表达式的结束符.请编写一个程序检查表达式中的左右圆括号是否匹配,若匹配,则返 ...
- [USACO12MAR]摩天大楼里的奶牛Cows in a Skyscraper (状态压缩DP)
不打算把题目放着,给个空间传送门,读者们自己去看,传送门(点我) . 这题是自己做的第一道状态压缩的动态规划. 思路: 在这题中,我们设f[i]为i在二进制下表示的那些牛所用的最小电梯数. 设g ...
- PHP 中 call_user_func 的使用
call_user_func函数类似于一种特别的调用函数的方法,使用方法如下 第一种情况: function set_max($a,$b) { if($a>$b) echo $a; else e ...
- Untiy中的数据平滑处理
本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/50680237 作者:car ...
- Map 遍历的几种方法
复习map的过程中想到的,做个简单的记录 public class HashMapTest { public static void main(String args[]) { Map<Inte ...
- easyui获取当前点击对象tabs的title和Index
观察上面打开的tabs选项卡,肯定会有一个目前是被选中状态,而这个状态的class属性也肯定是和其他tabs不一样的,有个class等于tabs-selected的 var title = $('.t ...
- 工具-Telerik trial安装图解