封装Animte 动画函数

虽然可能以后的开发中可能根本不需要自己写,Jquery 给我们封装好了,或者用CSS3的一些属性达到这样的效果可能更简单。

我比较喜欢底层的算法实现,万变不离其中,这个逻辑思路,也是需要锻炼的。也跟着做了一遍

    ///动画函数
//element:元素
//target:最后停止的位置
function animte(element, target) { //只有一个Timeid定时器在执行
if (element,timerId) {
clearInterval(element.timerId)
element.timerId = null
} //定时器 每隔多少触发
element.timerId = setInterval(function ()
{
const step=6 //步进
const current=element.offsetLeft//盒子现在的位置 //如果现在位置>目标位置 则是向左移动 left为负数
if (current>target) {
step = - Math.abs(step)
} //当快到达目标位置时则停止计时器
if (Math.abs(current-target)<=Math.abs(step)) {
//停止/
clearInterval(element.timerId)
element.style.left = target + 'px'
//退出函数
return;
}
element.style.left = (current + step) + 'px';
}, 30)
}

  

JavaScript—封装animte动画函数的更多相关文章

  1. JavaScript封装Ajax工具函数及jQuery中的ajax,xhr在IE的兼容

    封装ajax工具函数 首先要思考:1.为什么要封装它?提高开发效率2.把一些不确定的情况考虑在其中 a. 请求方式 b. 请求地址 c. 是否异步 d. 发送参数 e. 成功处理 f. 失败处理3.确 ...

  2. Js封装的动画函数实现轮播图

    ---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画         function ...

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

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

  4. javascript封装animate动画

    面向对象式: Element.prototype.animate=animate; Element.prototype.getStyle=getStyle; function animate(json ...

  5. 原生javascript封装的函数

    1.javascript 加载的函数 window.onload = function(){} 2.封装的id函数 function $(id) { return document.getElemen ...

  6. js-特效部分学习-offsetParent、scrollHeight 、动画函数的封装

    1. offsetParent  获取的最近的定位的父元素   offsetLeft/offsetTop  是相对于offsetParent的距离 offsetHeight/offsetWidth 获 ...

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

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

  8. 原生JS实现动画函数的封装

    封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if ...

  9. JS---最终版本--封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度

    封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度 相较之前的,增加了2个判断,第一个判断是不是透明度,第二个判断是不是zindex, 都不是,就只是普通属 ...

随机推荐

  1. P1057 数零壹

    P1057 数零壹 转跳点:

  2. 锤子科技向OpenBSD基金会捐款195 万

    导读 专注于提供 OpenBSD 资讯的网站 OpenBSD Journal 昨日报道了锤子科技成为 OpenBSD 基金会 2019 年首位铱金捐赠者的消息. 根据 OpenBSD Journal ...

  3. 英语 - take的短语

    take care of  照顾 take place  发生 take action  行动 take over  接管 take in   欺骗(某人) take up   拿起 take awa ...

  4. python 鞍点

    # 鞍点: 所在行的最大值,所在列的最小值 import random A = [[random.randint(1,100) for j in range(5)]for i in range(5)] ...

  5. 开源DDD设计模式框架YMNNetCoreFrameWork第6篇-.net Core Logging和Nlog结合

    源码地址:https://github.com/topgunymn/YMNNetCoreFrameWork 遇到的坑:使用了Nlog以后,.NETcore自带的日志等级不起作用,只有nlog配置配置文 ...

  6. 实验吧-杂项-啦啦啦(数据包http导出、图片拼接)

    比较综合的一道题. 1.数据包数据提取 首先下载数据包,一般数据包都是抓取的一些数据,需要对数据进行分析. 用wireshark打开数据包,筛选出http协议的数据,发现有两个是上传的数据: 我们就看 ...

  7. opencv+python+dlib人脸关键点检测、实时检测

    安装的是anaconde3.python3.7.3,3.7环境安装dlib太麻烦, 在anaconde3中新建环境python3.6.8, 在3.6环境下安装dlib-19.6.1-cp36-cp36 ...

  8. AD走圆弧走线

    美式键盘: “shift  +  空格”

  9. Vue 获取时间戳返回自定义时间格式

    直接在Vue全局函数定义: Vue.prototype.padLeftZero = function(str) { return ('00' + str).substr(str.length); }; ...

  10. 吴裕雄--天生自然 JAVASCRIPT开发学习:事件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...