JS原生封装动画函数

封装一个简单的原生匀速动画函数

/*** 匀速动画函数* @param {位移的元素} elm * @param {位移的目标位置} target */
function moveAnimation(elm, target) {clearInterval(elm.timeID);let position = elm.offsetLeft;let step = (target - position) > 0 ? 10 : -10;elm.timeID = setInterval(function () {position += step;if (Math.abs(target - position) > Math.abs(step)) {elm.style.left = position + 'px';} else {elm.style.left = target + 'px';clearInterval(elm.timeID);}}, 10)
}

缓动动画函数

/*** 缓动动画函数* @param {位移元素} elm * @param {位移目标} target */
function slowAnimation(elm, target) {clearInterval(elm.timeID);let position = elm.offsetLeft;elm.timeID = setInterval(function () {let step = position > target ? Math.floor((target - position) / 10) : Math.ceil((target - position) / 10);position += step;elm.style.left = position + 'px';if (target == position) {clearInterval(elm.timeID);}}, 20)
}

JS原生封装动画函数相关推荐

JS原生封装时间函数日期格式过滤
函数封装- 日期格式过滤 function format(time) {if(!time) time = new Date();let date = new Date(time);let y = da ...
javascript中BOM介绍、屏幕尺寸、历史记录、URL解析、计算机信息获取、定时器、三大系列及兼容代码、封装动画函数、同步和异步
BOM介绍: BOM指的是浏览器对象模型,是用来操作浏览器的,例如浏览器弹窗.地址栏.滚动条等,浏览器顶级对象:window:页面中的所有内容都是属于window的,window可以省略:confir ...
animate用法 js原生_animate动画、原生JS实现轮播图
写在前面最近在写项目的时候,才发现自己对css3这部分的内容已经生疏了,复习css3的时候,看到animate属性,就用其写了个焦点轮播图,当然自己也用原生JS码了个,当然css3动画无疑是锦上添花 ...
js原生封装Ajax
注意:1.服务端的返回会自动判断你的数据类型并且生成一个头部. 2.字符串函数,判断字符串中含有某子字符串 3.对象覆盖,沃日这也太草了,有就覆盖,没有就添加 4.首先是前端:使用ajax发送get请 ...
基于JS原生封装POST、GET请求，解决onreadystatechange=2不执行问题
// 常用工具函数 var tools = {ajaxGet: function (url, query, succCb, failCb, isJson) {if (query) {var parms ...
PC端网页特效二：mouseenter 和 mouseover 的区别、动画函数封装
目录 5.mouseenter 和 mouseover 的区别 6.动画函数封装动画实现原理简单动画函数封装动画函数给不同元素记录不同定时器缓动效果原理动画函数多个目标值之间移动缓动函 ...
原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）...
移动端 css3 transition 动画 ,requestAnimationFrame 动画对于性能的要求,h5优先考虑: 移动端单页有时候制作只用到简单的css3动画即可,我们封装一下, ...

JS原生封装动画函数

封装一个简单的原生匀速动画函数

缓动动画函数

JS原生封装动画函数相关推荐

最新文章

热门文章