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动画函数封装的更多相关文章

  1. javascript动画函数封装(升级版)

    //把 任意对象 的 任意数值属性 改变为 任意的目标值 function animate(obj, json, fn) { clearInterval(obj.timer); obj.timer = ...

  2. 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

  3. 原生javascript 基础动画函数封装(二)

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  4. 原生javascript 基础动画函数封装(一)

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  5. 【前端】Util.js-ES6实现的常用100多个javaScript简短函数封装合集(持续更新中)

    Util.js (持续更新中...) 项目地址: https://github.com/dragonir/Util.js 项目描述 Util.js 是对常用函数的封装,方便在实际项目中使用,主要内容包 ...

  6. 移动端滑屏全应用【一】cssHandler操作基础动画函数封装

    前言: 大家都知道,在移动端进行操作结点移动时,我们都会使用操作transform来代替top等用以提高性能,必要的时候还可开启3d加速.我们都会使用getComputedStyle来获取结点的最终样 ...

  7. js变速动画函数封装 回调函数及层级还有透明度

    //点击按钮,改变宽度到达一个目标值,高度到达一个目标值 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { re ...

  8. javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽

    运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...

  9. js 变速动画函数

    //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ...

随机推荐

  1. mac os x install redis-3.2.9

    下载.解压.重命名并且编译安装Redis~ wget http://download.redis.io/releases/redis-3.2.9.tar.gz ~ tar xzf redis-3.2. ...

  2. forEach 列出数组的每个元素:

    数组.forEach便利所有的元素 array.forEach(function(currentValue, index, arr), thisValue) function(currentValue ...

  3. BZOJ 1691 [Usaco2007 Dec]挑剔的美食家 multiset_排序_贪心

    Description 与很多奶牛一样,Farmer John那群养尊处优的奶牛们对食物越来越挑剔,随便拿堆草就能打发她们午饭的日子自然是一去不返了.现在,Farmer John不得不去牧草专供商那里 ...

  4. nginx强制使用https访问(多站点多域名配置)

    很多配置过https模板的人都知道,配置https 时 ,站在用户的角度http 和https 的区别根本不清楚.有时候敲 http 时会出现 404 错误,而实际上我们是https. 有朋友找我配置 ...

  5. JavaScript进阶【五】利用JavaScript实现动画的基本思路

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 配置sudo命令行为审计

    1.检查是否安装 rpm -aq sudo rsyslog #检验是否安装此软件 ***如果没有需执行(yum install sudo rsyslog -y)安装*** 2.配置审计 echo &q ...

  7. Centos上Mysql5.6的安装

    安装步骤: (1)查看Centos是否自带mysql :rpm -qa | grep mysql (2)将原有卸载     rpm -e --nodeps mysql-libs-5.1.73-5.el ...

  8. 2016年工作中遇到的问题1-10:select-for-update锁表

    1.select... for update锁表.注意事项:事务下使用,@Transactional如果用主键,只锁住1行记录如果不用主键,会锁住多条记录,mysql下测试,查询1条,锁住1行,查询2 ...

  9. java陷阱之spring事物未提交和回滚导致不可预知问题

    案发现场 //防止全局配置了 所以这里定义sprnig 不托管事物 @Transactional(propagation = Propagation.NOT_SUPPORTED) public boo ...

  10. 解决VTune错误PMU resources currently being used by another profiling tool or process

    错误信息: When I ran Hardware Event-based Sampling Analysis 0, it showed the ERROR: Collection failed Co ...