//动画函数---任意一个元素移动到指定的目标位置
//element为元素 target为位置
function carToon(element, target) {
//设置一个定时器让他循环去增加
element.timeid = setInterval(function () {
//拿到当前的位置(纯数字)
var current = element.offsetLeft;
//每次要移动的像素current
var step = 10;
//注意 这里是判断到底往那边走 如果当前的位置大于目标位置那么就往回走(往左边走 就是负的像素)
//否则 当前位置小于目标地址 就继续往右走(正数的像素)
step = current > target ? -step : step;
//这里是移动之后的位置
current += step;
//判断目标位置-当前的位置是否大于每次走的像素
if (Math.abs(target - current) > Math.abs(step)) {
//继续移动
element.style.left = current + 'px';
} else {
//目标位置-当前的位置小于每次走的像素.清理定时器 然后让它直接移动到目标的位置
clearInterval(element.timeid);
element.style.left = target + 'px';
}
}, 10)
}

js 封装一个均速动画函数的更多相关文章

  1. js进阶 13 jquery动画函数有哪些

    js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...

  2. JS---案例:手风琴 (利用封装好的动画函数)

    案例:手风琴     封装好的动画函数在common.js里面     //function getStyle(element, attr) {...}     //function animate( ...

  3. 封装一个Ajax工具函数

    /*封装一个ajax工具函数*/ window.$ = {}; /*通过$定义一个ajax函数*/ /* * 1. type   string   请求的方式  默认是get * 2. url     ...

  4. 使用原生JS封装一个动画函数

    最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...

  5. 原生JS封装创建多级菜单函数

    手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...

  6. 使用vue.js封装一个包含图片的跑马灯组件

    初衷: 学习完Vuejs后,来准备练习仿写一下老东家的门户页面,主要是为了熟悉一下常用插件的使用,比如video.js,wow.js,swiper等等:而其中涉及到一个包含图片跑马灯组件,大概长这样( ...

  7. JS 封装一个显示时间的函数

    s(); function s (){ var mydate=new Date(); var y = mydate.getFullYear(); var m = mydate.getMonth(); ...

  8. JS 封装一个求数组最大值的函数

    var aa = [1,2,3,4,9,2,5]; z(aa); function z(attr){ var b = 0 for(var i =1;i<aa.length;i++){ if(aa ...

  9. JS 封装一个求圆面积的函数 传值:半径

    y(6) var s = ""; function y (r){ s = Math.PI*r*r; alert(s); }

随机推荐

  1. 【原创】1. MYSQL++简介

    MYSQL++是对于MYSQL C API的C++完全包装. MYSQL++能够至少做如下几件事情 1. 连接数据库 通过TCP连接数据库 通过WINDOWS命名管道连接数据库 UNIX域SOCKET ...

  2. 【HDU3949】XOR

    [题目大意] 给定一个数组,求这些数组通过异或能得到的数中的第k小是多少. 传送门:http://vjudge.net/problem/HDU-3949 [题解] 首先高斯消元求出线性基,然后将k按照 ...

  3. EKF model&realization

    REF: https://pythonrobotics.readthedocs.io/en/latest/modules/localization.html#unscented-kalman-filt ...

  4. mybatis内部类映射写法

    直接上代码:   mybatis内部类映射使用$而不是.

  5. orzdba工具安装注意事项

    orzdba是一个监控mysql性能的一个比较好用的perl脚本,是淘宝开源的小工具,下载地址http://code.taobao.org/p/orzdba/src/trunk/ 配置过程中除了参照& ...

  6. Luogu 1606 [USACO07FEB]白银莲花池Lilypad Pond

    感觉应当挺简单的,但是弄了好久……菜死了 如果不考虑那些为$1$的点,直接跑个最短路计数就好了,但是我们现在有一些边可以不用付出代价,那么只要在连边的时候先预处理搜一下就好了. 原来的想法是拆点,但是 ...

  7. CORS同源策略

    同源策略以及跨域资源共享在大部分情况下针对的是Ajax请求.同源策略主要限制了通过XMLHttpRequest实现的Ajax请求,如果请求的是一个“异源”地址,浏览器将不允许读取返回的内容. 支持同源 ...

  8. Java IO RandomAccessFile 任意位置读/写

    随机读写类 RandomAccessFile的唯一父类是Object,与其他流父类不同.是用来访问那些保存数据记录的文件的,这样你就可以用seek( )方法来访问记录,并进行读写了.这些记录的大小不必 ...

  9. MySQL性能调优与架构设计——第3章 MySQL存储引擎简介

    第3章 MySQL存储引擎简介 3.1 MySQL 存储引擎概述 MyISAM存储引擎是MySQL默认的存储引擎,也是目前MySQL使用最为广泛的存储引擎之一.他的前身就是我们在MySQL发展历程中所 ...

  10. 跨域Ajax请求(jQuery JSONP MVC)

    通过jQuery的$.ajax方法发送JSONP请求 js代码 <script type="text/javascript"> function jsonptest2( ...