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. 【WebApp】IOS兼容问题

    最近,主要是基于Framework7 + RequireJs框架,移动端团队开发Webview框架,内嵌Web的模式进行WebApp开发. 在开发过程中不得不遇到一些 兼容性问题. 1.现象:IOS环 ...

  2. Juery实现选项卡

    选项卡是一种很常用的组件.比如3个选项的选项卡,比较笨的一种办法是,把3个状态写成3个独立页面,互相链接.这样做的问题也显而易见,切换的时候url会变.如果是手机端网页,加载慢一点,给人的感觉是不断的 ...

  3. java 常用API 包装 数组的覆盖和遍历

    package com.oracel.demo01; public class Sz { public static void main(String[] args) { // TODO Auto-g ...

  4. BZOJ 1725: [Usaco2006 Nov]Corn Fields牧场的安排 状压动归

    Description Farmer John新买了一块长方形的牧场,这块牧场被划分成M列N行(1<=M<=12; 1<=N<=12),每一格都是一块正方形的土地.FJ打算在牧 ...

  5. CF div2 499 A. Stages

    Code: #include<cstdio> #include<algorithm> #include<iostream> using namespace std; ...

  6. Camera三维动画

    一.概述 在Android中说到3D开发,我们首先想到的是OpenGL,但用起来比较复杂繁琐,不适合做应用级别的3D变换.Android为我们提供了一个简化版的3D开发入口:Camera(这里的Cam ...

  7. HTTP 请求报文和响应报文分析和解刨!!

    http请求和响应报文分析 一>http请求报文主要包括三个部分:1.请求行:2.请求头:3;请求体: 1,请求行一般包括三个部分:请求方式:请求url : http协议版本. 请求方法:大部分 ...

  8. python开发项目:学生选课系统

    程序要求:1.创建北京.上海两所学校(分析:通过学校类实例化两个学校实例) 2.创建Linux.python.go三个课程,Linux\go在北京开,Linux在上海开(创建Linux.python. ...

  9. mybatis入门截图二

    -------------------- 线程不安全问题 首先明白什么是线程不安全: 举例:struts2中,每个action中都定义了model模型对象(action类中是全局对象的存在  数据域属 ...

  10. CodeForcesGym 100641E Inspectors

    Inspectors Time Limit: 1000ms Memory Limit: 262144KB This problem will be judged on CodeForcesGym. O ...