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. Linker scripts之SECTIONS

    1 Purpose The linker script describes how the sections in the input files should be mapped into the ...

  2. 项目随笔之springmvc中freemark如何获取项目路径

    转载:http://blog.csdn.net/whatlookingfor/article/details/51538995 在SpringMVC框架中使用Freemarker试图时,要获取根路径的 ...

  3. 前端swiper使用指南

    swiper 在网页中常用的方法 1.使用时在页面引入 <link rel="stylesheet" href="front/css/swiper.min.css& ...

  4. (4.33)sql server2014内存数据库(内存中OLTP(In-Memory OLTP))

    查看文章:https://blog.51cto.com/ultrasql/1626514

  5. 洛谷P1941飞扬的小鸟 完全背包

    思维难度不大,就是有许多细节要注意. 1.不能开滚动数组. 2.要特判飞过天花板的情况. Code: #include<cstdio> #include<algorithm> ...

  6. express+node.js搭建的服务器和在sublimeServer下的页面请求报跨域错误

    1.前端页面使用vue中的axios请求nodejs响应.报以下错误: Failed to load http://localhost:3000/users/validate: Response to ...

  7. 安装sublimeServer插件

    1.安装目的 做练习在谷歌浏览器中遇到报错信息:axios.min.js:8 Failed to load file:///E:/%E8%87%AA%E5%AD%A6/vue%E5%AD%A6%E4% ...

  8. ubuntu上的arm-elf-tools -20040427.sh 下载及安装问题的解决

    要完成uclinux在ARM上的移植,必须有这个工具. 下载地址:http://opensrc.sec.samsung.com/download.html 这个网站上还有许多其它资源可以下载.我选择 ...

  9. struts配置

    创建struts2的应用,首先应如前面所示要搭建好环境.jar包的导入和web.xml配置这里不在写出来.  如上所示,struts2中是采用<package>元素来管理Action的,包 ...

  10. Servlet过滤器和监听器知识总结

    Servlet过滤器是 Servlet 程序的一种特殊用法,主要用来完成一些通用的操作,如编码的过滤.判断用户的登录状态.过滤器使得Servlet开发者能够在客户端请求到达 Servlet资源之前被截 ...