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. a better git log

    git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d ...

  2. vs2012编译boost_1_54_0

    在原文上进行了修改,我的环境是VS2012 ,在编译 注意事项:Boost 请慎用!微软太坑爹...且直接使用GitHub上的exe文件也可以,特定版本的只能自己编译了....汗!!! 原文地址:ht ...

  3. Java之关于面向对象

    面向对象,呃,别给我说程序员找不到对象,那是windows才会出现的情况~~~ 就简单记下笔记什么的吧. 1.关于定义和赋值 之前总是搞混淆,说到底是没有搞清楚. shit bigOne=new sh ...

  4. pywinauto进阶练习

    case1.画图工具简单练习 #_*_coding=utf-8_*_ import time from pprint import pprint import logging from logging ...

  5. IDEA - 自动添加代码

    自动添加代码Surroundwith 快捷键:Ctrl+Alt+T 有if.while.function.try.....

  6. Project Euler 16 Power digit sum( 大数乘法 )

    题意: 215 = 32768,而32768的各位数字之和是 3 + 2 + 7 + 6 + 8 = 26. 21000的各位数字之和是多少? 思路:大数乘法,计算 210 × 100 可加速计算,每 ...

  7. HDU 4704 Sum( 费马小定理 + 快速幂 )

    链接:传送门 题意:求 N 的拆分数 思路: 吐嘈:求一个数 N 的拆分方案数,但是这个拆分方案十分 cd ,例如:4 = 4 , 4 = 1 + 3 , 4 = 3 + 1 , 4 = 2 + 2 ...

  8. webapi get请求 FromUri list参数传递

    今天做项目调用第三方的webapi时,发现get请求竟然用的是FromUri list参数,汗... 这里简单记录下请求传参的方式(但不推荐大家使用get FromUri list参数 来定义weba ...

  9. 【codeforces 799B】T-shirt buying

    [题目链接]:http://codeforces.com/contest/799/problem/B [题意] 告诉你每个人喜欢的衣服的颜色; 然后告诉你每件衣服的正面和背面的颜色以及它的价格; 只要 ...

  10. 【codeforces 723F】st-Spanning Tree

    [题目链接]:http://codeforces.com/contest/723/problem/F [题意] 给你一张图; 让你选择n-1条边; 使得这张图成为一颗树(生成树); 同时s的度数不超过 ...