js运动基础2（运动的封装）
简单运动的封装
先从最简单的封装开始，慢慢的使其更丰富，更实用。
还是上一篇博文的代码，在此不作细说。
需求：点击按钮，让元素匀速运动。
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
<style>
#d1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:100px;
left:200px;
}
</style>
</head>
<body>
<button id="btn">点击移动</button>
<div id="d1"></div>
</body>
</html>
对js中的运动函数进行简单的封装
<script>
//获取标签
let oBtn = document.getElementById("btn");
let oDiv = document.getElementById("d1");
// 声明一个变量用来储存计时器
let iTimer = null;
oBtn.onclick = function(){
// 调用函数
startMove();
};
// 封装函数
function startMove(){
clearInterval(iTimer);
iTimer = setInterval(function(){
if(oDiv.offsetLeft ===500){
clearInterval(iTimer);
}else{
oDiv.style.left = oDiv.offsetLeft + 10 + "px";
}
},30);
}
封装函数其实就是讲多个函数中相同的部分提前出来，将其放在一个函数中，使用的时候可以之间调用。作用是增加代码的利用率，提高开发效率。
为了使封装的函数可以得到更广泛的使用，我们需要把一些运动过程中需要发生变化的部分通过传参的方式进行更改。
下面以网页中常见的 分享到 为例进行详细说明
默认状态：
鼠标悬浮在元素上：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1 {
width: 100px;
height: 200px;
background:red;
position: absolute;
left: -100px;
top: 200px;
}
#div2 {
width: 30px;
height: 70px;
background: black;
position:absolute;
right:-30px;
top: 70px;;
color:#fff;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">分享到</div>
</div>
</body>
</html>
利用上面封装的函数，加以修改之后直接在本案例中使用
<script>
// 将其复制成两个,分别用于鼠标悬浮时和鼠标移除时
//悬浮时向右移动
function startMove1(){
clearInterval(iTimer);
iTimer = setInterval(function(){
if(oDiv1.offsetLeft ===0){
clearInterval(iTimer);
}else{
oDiv1.style.left = oDiv1.offsetLeft + 10 + "px";
}
},30);
}
// 移除元素时恢复默认状态
function startMove2(){
clearInterval(iTimer);
iTimer = setInterval(function(){
if(oDiv1.offsetLeft ===-100){
clearInterval(iTimer);
}else{
oDiv1.style.left = oDiv1.offsetLeft - 10 + "px";
}
},30);
}
// 首先获取两个元素
let oDiv1 = document.getElementById('div1');
let oDiv2 = document.getElementById('div2');
let iTimer = null;
// 给为父级的div绑定mouseover 和 mouseout事件
oDiv1.onmouseover = function() {
// 调用
startMove1();
};
oDiv1.onmouseout = function() {
// 调用
startMove2() // 鼠标移出,让div隐藏
};
</script>
但是，上述案例中封装的函数使用起来并不方便，下面将其优化一下。
将共同点保留，不同点用形参代替，在调用时根据需求传入不同的值。整理后js代码如下：
/**参数的含义：
* oDom:作用点（发生运动的元素）
* iTarget:目标值（需要移动到达的位置）
* iSpead:移动的速度（每一次移动量）
*/
function startMove(oDom,iTarget,iSpead){
clearInterval(iTimer);
iTimer = setInterval(function(){
if(oDom.offsetLeft ===iTarget){
clearInterval(iTimer);
}else{
oDom.style.left = oDom.offsetLeft + iSpead + "px";
}
},30);
}
let oDiv1 = document.getElementById('div1');
let oDiv2 = document.getElementById('div2');
let iTimer = null;
oDiv1.onmouseover = function() {
startMove(oDiv1,0,10);
};
oDiv1.onmouseout = function() {
startMove(oDiv1,-100,-10) // 鼠标移出,让div隐藏
};
上述代码中，将函数操作的元素提前出来，变成了函数的形参，这样就可以让此函数针对任意的元素。
但是注意,
目标值iTarget必须为速度iSpead的整数倍。否则停止条件无法满足，运动就会一直进行。
js运动基础2（运动的封装）的更多相关文章
- 第八节 JS运动基础
运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
- 学习blus老师js(6)--js运动基础
运动基础 一.匀速运动 运动框架 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...
- JS学习-基础运动
多物体运动 多个物体用同一个函数时,函数里定义的定时器应该要每个物体对应一个定时器名称,不然会导致未完成运动就被关闭了,因为定时器名称一样,而开启定时器前会清除一下. obj.timer 多值同时运动 ...
- JS运动---运动基础（缓冲运动）
(1)手风琴效果 分析: (2)基础缓冲运动 接下来取整 原因: px为计算机识别的最小单位,1px无法再往下拆分.所以css如果取值200.5px,解析时计算机会自动将其改为200px注意:这里的数 ...
- JS运动---运动基础（匀速运动）
[一]运动基础 (2)基础运动案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- js 运动函数篇(二) （加速度运动、弹性运动、重力场运动（多方向+碰撞检测+重力加速度+能量损失运动）拖拽运动）层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写加速度运动.弹性运动.重力场运 ...
- Javascript 运动基础 01
JS运动基础 运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动 速度不变 <s ...
- 如何用js自己实现Animate运动函数
js运动是我们学习js必不可少的研究部分,首先我们要知道js的运动其实仅仅是不断改变元素的某个属性值而已,比如不断改变一个绝对定位div的left值,那么你看到的效果就是这个div不断的向右边运动,那 ...
- 【原生JS组件】javascript 运动框架
大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...
随机推荐
- Sqoop数据迁移工具的使用
文章作者:foochane 原文链接:https://foochane.cn/article/2019063001.html Sqoop数据迁移工具的使用 sqoop简单介绍 sqoop数据到HDF ...
- JDBC之PreparedStatement
JDBC之PreparedStatement 一.java.sql.PreparedStatement接口简介 该接口表示预编译的 SQL 语句的对象. SQL 语句被预编译并存储在 Prepared ...
- Docker Machine的使用
前面两篇文章(<Asp.Net Core 发布到 Docker(Linux Centos 虚拟机,使用Dockerfile)> <Docker Compose的使用>),简单介 ...
- F#周报2019年第35期
新闻 新增强的NuGet搜索 Windows Terminal预览版v0.4发布 在Visual Studio的YouTube频道上获取更多的新内容 .NET团队是如何使用Azure Pipeline ...
- [Error]Win8安装程序出现2502、2503错误解决方法
转载自:http://jingyan.baidu.com/article/a501d80cec07daec630f5e18.html 在Win8中,在安装msi安装包的时候常常会出现代码为2502.2 ...
- codeforce978C-Almost Arithmetic Progression+暴力，枚举前两个数字的情况
传送门:http://codeforces.com/contest/978/problem/D 题意:求变为等差数列,最小要改动的数字个数: 思路:暴力,这道题只用枚举前面两个数字的情况就ok,反思自 ...
- hdu6354 杭电第五场 Everything Has Changed 计算几何
Everything Has Changed Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K (Java ...
- yzoj P2044 数字游戏 题解
题意 dfs骗了30分,一开始想的距离正解差一点啊,贪心加dp就可以过的水题,真正太蒻了 解析 代码 #include<bits/stdc++.h> using namespace std ...
- Linux系统调用表（x86_64）
内核版本 Linux 4.7 Note:64位系统中,不再使用int 0x80来进行系统调用,取而代之的是syscall指令 %rax System call %rdi %rsi %rdx %r10 ...
- JS-DOM ～ 02. 隐藏二维码、锁定、获取输入框焦点、for循环为文本赋值、筛选条件、全选和反选、属性的方法操作、节点的层次结构、nodeType
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...