JavaScript运动函数实例详解
运动函数是我们自己封装的一个函数。
作用是将css样式的改变不是一次性完成 是 逐步完成 执行效果 看上去 像是 动画/运动 完成的css样式改变。
实际项目中框架等都有自己的运动函数我们目前封装一个简单的兼容多属性的运动函数。
运动函数部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background: rgb(231, 12, 48);
margin: 0 auto;
opacity: 0.3;
/* transition: 3s; */
}
p {
width: 100px;
height: 100px;
background: black;
position: fixed;
top: 200px;
left: 50px;
}
</style>
</head>
<body>
<button>点击</button>
<div></div>
<script>
var oDiv = document.querySelector('div');
var oBtn = document.querySelector('button');
var oP = document.querySelector('p')
oBtn.addEventListener('click',function(){
move(oDiv,{width:1800,height:900,opacity:1} , function(){ oDiv.style.background = 'black' } );
})
// 运动函数命名
// move 运动函数
// @param object element 要执行运动函数的标签对象
// @param object object 要执行运动的css属性 和 最终数值
// @param function callback 运动结束执行的回调函数
// 默认值是空函数
function move(element, object, callback = function () { }) {
// 定义变量存储定时器个数
let num = 0;
// 循环遍历参数二(object)
// 使用 for...in 循环 使用 let 定义变量
for (let type in object){
// type 是 参数2对象的属性 也就是 要运动的css样式的属性
// object[type] 是 参数2对象的属性值 也就是 要运动的css样式的 最终数值
// 定时器数量加一
num++;
// 开始数值，也就是获取的原始数值，兼容透明度写法
let startVal = (type === 'opacity') ? window.getComputedStyle(element)[type] * 100 : parseInt(window.getComputedStyle(element)[type]);
// 结束数值，也就是输入的属性对应的属性值，兼容透明度写法
let endVal = (type === 'opacity') ? object[type] * 100 : object[type];
// 定时器开始，time记录定时器编号
let time = setInterval( function () {
// 设定步长值= 结束数值 - 开始数值 / 10
let step = (endVal - startVal) / 10;
// 如果步长值大于0 就向上取整，反之则向下取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// 将初始值 += 步长值 再把新值赋值给初始值
startVal += step;
// 将新的步长值 赋值给 标签对象的css样式 兼容 透明度
element.style[type] = (type === 'opacity') ? startVal / 100 : startVal + 'px';
// 如果初始值等于最终值
if (startVal === endVal) {
// 清除定时器
clearInterval(time);
// 变量 累减1 也就是 少了一个执行的定时器
// num--;
// 当执行的定时器为0 时，所有定时器都清除了
if (num === 0) {
callback();
}
}
}, 20)
}
}
</script>
</body>
</html>
运行结果：
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!
相关推荐
-
js运动事件函数详解
本文实例为大家分享了js运动事件函数,供大家参考,具体内容如下 HTML <div id="breedsdog"> <h2 class="title">The Dog</h2> <p class="describe">Split between cat,belong to the cat family,cat,cat,is the world's more widely<br> in t
-
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
本文实例讲述了原生javascript运动函数的封装.分享给大家供大家参考,具体如下: //封装匀速运动 //参数: // 1.dom对象 // 2.样式属性(top,left,width,height,opacity等等) // 3.起始位置,结束位置 // 4.速度:时间间隔,步长 // 5.方向: //返回值 function moveObj(domObj,attr,startValue,endValue,timeSpace,step,direction) { let currValue
-
JS实现运动缓冲效果的封装函数示例
本文实例讲述了JS实现运动缓冲效果的封装函数.分享给大家供大家参考,具体如下: 之前经常写运动函数,要写好多好多,后来想办法封装起来.(运动缓冲). /* 物体多属性同时运动的函数 obj:运动的物体 oTarget:对象,属性名为运动的样式名,属性值为样式运动的终点值 ratio:速度的系数 */ function bufferMove(obj, oTarget, fn,ratio = 8) { clearInterval(obj.iTimer); obj.iTimer = setInterv
-
JavaScript运动函数实例详解
运动函数是我们自己封装的一个函数. 作用是将css样式的改变不是一次性完成 是 逐步完成 执行效果 看上去 像是 动画/运动 完成的css样式改变. 实际项目中框架等都有自己的运动函数我们目前封装一个简单的兼容多属性的运动函数. 运动函数部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=&quo
-
JavaScript hasOwnProperty() 函数实例详解
hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性.如果有,返回true,否则返回false. 该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法. IE 5.5+.FireFox.Chrome.Safari.Opera等主流浏览器均支持该函数. 语法 object.hasOwnProperty( propertyName ) 参数 参数 描述 propertyName Str
-
JavaScript中push(),join() 函数 实例详解
定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选
-
JavaScript CollectGarbage函数案例详解
首先看一个内存释放的实例: <SCRIPT LANGUAGE="JavaScript"> <!-- strTest = "1"; for ( var i = 0; i < 25; i ++ ) { strTest += strTest; } alert(strTest); delete strTest; CollectGarbage(); //--> </SCRIPT> CollectGarbage,是IE的一个特有属性,用
-
JavaScript动画函数封装详解
目录 一.动画函数原理 二.动画函数简单封装 三. 动画函数给不同元素记录不同定时器 四.缓动效果原理 五. 动画函数在多个目标值之间移动 六.动画函数添加回调函数 一.动画函数原理 核心原理:通过定时器setInterval() 不断移动盒子位置. 实现步骤: 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位,才能使用element.style.left 如下所示: 给定一个盒子,让其慢慢移动到300px的位置. 代
-
JavaScript数组方法实例详解
目录 简介 创建数组 创建方法 详解 方法大全 join() push()和 pop() shift() 和 unshift() sort() reverse() concat() slice() splice() indexOf()和 lastIndexOf() forEach() map() filter() fill() (ES6 新增) every() some() includes() (ES7) reduce()和 reduceRight() toLocaleString() 和
-
C++ 中const修饰虚函数实例详解
C++ 中const修饰虚函数实例详解 [1]程序1 #include <iostream> using namespace std; class Base { public: virtual void print() const = 0; }; class Test : public Base { public: void print(); }; void Test::print() { cout << "Test::print()" << end
-
Linux 在Shell脚本中使用函数实例详解
Linux 在Shell脚本中使用函数实例详解 Shell的函数 Shell程序也支持函数.函数能完成一特定的功能,可以重复调用这个函数. 函数格式如下: 函数名() { 函数体 } 函数调用方式: 函数名 参数列表 实例:编写一函数add求两个数的和,这两个数用位置参数传入,最后输出结果. root@ubuntu:/home/study# vi test3 #!/bin/bash add(){ a=$1; b=$2; z=`expr $a + $b`; echo "The sum is $z&
-
C语言中调用Swift函数实例详解
C语言中调用Swift函数实例详解 在Apple官方的<Using Swift with Cocoa and Objectgive-C>一书中详细地介绍了如何在Objective-C中使用Swift的类以及如何在Swift中使用Objective-C中的类.在后半部分也介绍了如何在Swift中使用C函数,不过对于如何在C语言中使用Swift函数却只字未提.这里我就为大家分享一下如何在C语言中调用Swift函数. 我们首先要知道的是,所有Swift函数都属于闭包.其次,Swift函数的调用约定与
-
C 语言中strstr函数实例详解
C 语言中strstr函数实例详解 strstr函数 strstr(str1,str2) 函数用于判断字符串str2是否是str1的子串.如果是,则该函数返回str2在str1中首次出现的地址:否则,返回NULL const char* strstr(const char* str1,const char* str2); char* strstr(char* str1,const char* str2); 库中实现的strstr #include <stdio.h> #include <