源生的html属性js,使用源生JS自定义动画(支持多个属性)
通过自定义动画,可以很好提升对源生JavaScript知识的理解,主要涉及的技术:
1、setInterval 最小支持10毫秒,低于10毫秒按10秒计算,对于Chrome最少可以支持到4ms。
2、setInterval处理函数作用域,使用let锁定处理函数变量的作用
3、动画原理,在明确动画持续时间下,划分多个时间片段,改变元素的状态,达到目标值为止,结束动画
4、需要有面向对象思维,处理多个属性的动画,使用{}构建多个动画的信息
完整代码/**
* 自定义元素的动画,支持多个属性
*
* @param {Object} el 动画元素
* @param {Object}} option 动画参数 {left:50,top:500} 注意:不要带单位 错误{left:50px} 正确{left:50}
* @param {Number} speed 动画持续时间(秒)
*/
function animate(el, option, speed = 0.5) {
if (!el || !option) {
return;
}
function run() {
animateData = {};//动画数据
var needTime = speed * 1000;
var cs = window.getComputedStyle(el);
//计算方向、前进距离
//这里使用let的原因是锁定key的作用域,否则setInterval执行函数的key值总是最后一次循环的key,就不能实现多个属性的动画效果
for (let key in option) {
var currValue;//当前值
animateData[key] = {};
//样式属性还是普通属性
animateData[key].whereProperty = null;
if ((currValue = cs[key])) {
animateData[key].whereProperty = "style";//自定义属性
} else if ((currValue = el[key])) {
animateData[key].whereProperty = "attr";//普通属性
}
if (!currValue) {
continue;
}
//目标值
var targetValue = parseFloat(option[key]);
//是否带px
animateData[key].isPx = false;//是否带px
if ((currValue + "").endsWith("px")) {//带px
animateData[key].isPx = true;
}
//方向
animateData[key].direction = "-";
if (targetValue > parseFloat(currValue)) {
animateData[key].direction = "+";
}
//当前值(不带单位)
animateData[key].value = parseFloat(currValue);
//每次移动的距离(需要计算)
animateData[key].step = (targetValue - animateData[key].value) / (needTime / 10);
//开始移动
var count = 0;
animateData[key].interval = setInterval(function () {
//需通过key重新获取,不能直接使用targetValue,否则在serInterval中使用的是最后的targetValue
var targetValue = parseFloat(option[key]);
animateData[key].value += animateData[key].step;//正方向或负方向
//达到目标
if ((animateData[key].direction == "+" && animateData[key].value >= targetValue)
|| (animateData[key].direction == "-" && animateData[key].value <= targetValue)
) {
animateData[key].value = targetValue;//防止超过目标
}
// start 移动操作
if (animateData[key].whereProperty == "style") {
el.style[key] = animateData[key].value + (animateData[key].isPx ? "px" : 0);
} else {
el[key] = animateData[key].value + (animateData[key].isPx ? "px" : 0);
}
// end 移动操作
//移动结束,停止计时器
if (animateData[key].value == targetValue) {
clearInterval(animateData[key].interval);
return;
}
}, 10);
}
}
run();
}
源生的html属性js,使用源生JS自定义动画(支持多个属性)相关推荐
- 【Android 属性动画】属性动画 Property Animation 简介 ( 属性动画简介 | 属性动画特性 )
文章目录 一.属性动画简介 二.属性动画特性 一.属性动画简介 属性动画简介 : 1.动画制作框架 : 属性动画系统 , 允许你 将任何可变的操作制作成动画 , 其功能很强大 ; 2.基本功能 : 使 ...
- [js] 用js写一个方法检测浏览器是否支持css3的属性
[js] 用js写一个方法检测浏览器是否支持css3的属性 var div = document.createElement('div'); console.log(div.style.transit ...
- js获取鼠标所在html元素的id和属性
js获取鼠标所在html元素的id和属性: Code: <div onclick="Get_srcElement()"> <div id="001&qu ...
- 对象、对象的属性、对象字面量、枚举对象中的属性、可变类型、变量和对象——JS对象
目录 一.对象 二.对象的属性 三.对象字面量 四.枚举对象中的属性 五.可变类型 六.变量和对象 数据类型: 原始值:(不可变类型) 1.数值 Number 2.大整数 BigInt 3.字符串 S ...
- 原生js获取html元素属性,JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)...
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...
- js图解之-图解静态、私有、公有属性和方法的区别
js图解之-图解静态方法.私有方法.公有方法区别 首先,在方法之前,我们需要先铺垫一下我们的基础知识,从一砖一瓦开始,最终解决我们的问题 一.什么是面向对象 面向对象是一个伟大的编程思想, 本质:创建 ...
- 遍历和添加json对象的属性 和 遍历普通js对象的属性
1. 遍历 json 对象的属性 //定义json对象 var person= { name: 'zhangsan', pass: '123', fn: function(){ alert(this. ...
- JS JQuery添加、替换、删除元素class属性
1.先声明一个div和两个class样式,用来测试: <html><head><meta charset="utf-8"><title&g ...
- js第一节-js的属性操作
js第一节-js的属性操作 今天我们第一节的内容主要跟大家聊聊js的属性操作,那么什么是属性呢?属性就是对于一个事物的描述,比如一个元素它的id,它的value值等.每个元素都有其自己本有的属 ...
最新文章
- 计算机考试八页PPT,第八章节授课ppt-江苏省计算机等级考试.ppt
- centos java 指令_Centos 命令方式下载JDK1.7
- Java线程安全StampedLock
- MultipartFile 支持什么类型_公测首发 | vika 维格表: 支持 API 的连接型智能表格/新一代团队数据协作神器...
- CentOS 5.X用第三方源安装PHP MySQL Apache等
- elastic search java_在 Java 应用程序中使用 Elasticsearch
- 图像处理——DCT变换的学习笔记
- 【STC8A8K64S4A12开发板】—小白做GPIO点灯实验
- Android面试总结系列之面试技巧
- 使能和测试ARM64内核PAN机制
- 虚拟机安装linux的\/root,pt深海湛蓝爆屏图 -官网
- 支付宝原生组件(酒店时间选择)
- 读研攻略(7)—从0到1,研究生第一篇SCI的诞生
- 转-基于OpenGL的3D天空仿真
- HTML中字体属性、文本属性使用说明
- 在win10基础上安装Ubuntu16.04双系统(双硬盘)
- 25岁同济硕士生斩获中国首个CVPR最佳学生论文奖,他还是个「赛车发烧友」
- 微信公众号h5页面禁止用户调整字体大小
- CDN服务器是什么意思?CDN服务器搭建部署
- docker使用dockerfile方式运行java程序
热门文章
- 使用Process Explorer和Dependency Walker排查C++程序中dll库动态加载失败问题
- 详解各种各样的 “BW” —OBW,IBW ,RBW,VBW
- Worksoft Certify学习之路
- 经典案例重点案例:点名表,JS正则验证全选、全不选、反选,点击可以实现三个功能,轮播图 字符串截取以及替换,图片切换
- Mysql优化——唯一索引和普通索引的选择
- 计算机信息系统审计简报,审计简报范文审计报告写.doc
- 自己手写一个RPC,实现远程调用功能(基于netty、反射和代理)
- java解决行驶证识别问题
- 【1】GAN在医学图像上的生成,今如何?
- Python一键保存千张表情包图