JavaScript—封装animte动画函数
封装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动画函数的更多相关文章
- JavaScript封装Ajax工具函数及jQuery中的ajax,xhr在IE的兼容
封装ajax工具函数 首先要思考:1.为什么要封装它?提高开发效率2.把一些不确定的情况考虑在其中 a. 请求方式 b. 请求地址 c. 是否异步 d. 发送参数 e. 成功处理 f. 失败处理3.确 ...
- Js封装的动画函数实现轮播图
---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画 function ...
- 使用原生JS封装一个动画函数
最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...
- javascript封装animate动画
面向对象式: Element.prototype.animate=animate; Element.prototype.getStyle=getStyle; function animate(json ...
- 原生javascript封装的函数
1.javascript 加载的函数 window.onload = function(){} 2.封装的id函数 function $(id) { return document.getElemen ...
- js-特效部分学习-offsetParent、scrollHeight 、动画函数的封装
1. offsetParent 获取的最近的定位的父元素 offsetLeft/offsetTop 是相对于offsetParent的距离 offsetHeight/offsetWidth 获 ...
- 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)
移动端 css3 transition 动画 ,requestAnimationFrame 动画 对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...
- 原生JS实现动画函数的封装
封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if ...
- JS---最终版本--封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度
封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度 相较之前的,增加了2个判断,第一个判断是不是透明度,第二个判断是不是zindex, 都不是,就只是普通属 ...
随机推荐
- P1057 数零壹
P1057 数零壹 转跳点:
- 锤子科技向OpenBSD基金会捐款195 万
导读 专注于提供 OpenBSD 资讯的网站 OpenBSD Journal 昨日报道了锤子科技成为 OpenBSD 基金会 2019 年首位铱金捐赠者的消息. 根据 OpenBSD Journal ...
- 英语 - take的短语
take care of 照顾 take place 发生 take action 行动 take over 接管 take in 欺骗(某人) take up 拿起 take awa ...
- python 鞍点
# 鞍点: 所在行的最大值,所在列的最小值 import random A = [[random.randint(1,100) for j in range(5)]for i in range(5)] ...
- 开源DDD设计模式框架YMNNetCoreFrameWork第6篇-.net Core Logging和Nlog结合
源码地址:https://github.com/topgunymn/YMNNetCoreFrameWork 遇到的坑:使用了Nlog以后,.NETcore自带的日志等级不起作用,只有nlog配置配置文 ...
- 实验吧-杂项-啦啦啦(数据包http导出、图片拼接)
比较综合的一道题. 1.数据包数据提取 首先下载数据包,一般数据包都是抓取的一些数据,需要对数据进行分析. 用wireshark打开数据包,筛选出http协议的数据,发现有两个是上传的数据: 我们就看 ...
- opencv+python+dlib人脸关键点检测、实时检测
安装的是anaconde3.python3.7.3,3.7环境安装dlib太麻烦, 在anaconde3中新建环境python3.6.8, 在3.6环境下安装dlib-19.6.1-cp36-cp36 ...
- AD走圆弧走线
美式键盘: “shift + 空格”
- Vue 获取时间戳返回自定义时间格式
直接在Vue全局函数定义: Vue.prototype.padLeftZero = function(str) { return ('00' + str).substr(str.length); }; ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习:事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...