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来控制元素运动,须要写非常多运动的 ...
随机推荐
- 记录一下vue transition 过渡各状态（）
.slide-fade-enter{ opacity: 0; transform: translateX(100px); /*从哪里开始过渡:在过渡之前我就把位置定义在100px的位置,并 ...
- Flink的Job启动JobManager端(源码分析)
通过前面的文章了解到 Driver将用户代码转换成streamGraph再转换成Jobgraph后向Jobmanager端提交 JobManager启动以后会在Dispatcher.java起来RPC ...
- Redis学习总结(七)--Redis集群之客户端访问
我们来试试进行数据的存储 127.0.0.1:7000> set name marklogzhu OK 127.0.0.1:7000> get name "marklogzhu& ...
- Liunx学习总结(二)--目录和文件管理
之前我们了解了什么是 liunx ,并且认识了它的目录结构,今天我们就来学习下如何进行目录和文件的管理. 创建目录 语法: mkdir [-mp] 目录名称 选项与参数 -m :配置文件的权限喔!直接 ...
- Codeforces 814D
题意略. 思路: 由于不重合这个性质,我们可以将每一个堆叠的圆圈单独拿出来考虑,而不用去考虑其他并列在同一层的存在, 在贪心解法下,发现,被嵌套了偶数层的圆圈永远是要被减去的,而奇数层的圆圈是要加上的 ...
- Java集合框架之Vector浅析
Java集合框架之Vector浅析 一.Vector概述: 位于java.util包下的Vector是Java集合框架的重要一员,虽然没有ArrayList那么的常用,但是我们还要对其做相关学习: 1 ...
- codeforce440C-Maximum splitting-规律题
题意:问一个数最多可以变成几个合数的和: 思路: 时刻提醒自己再看到题目的时候的所作所为,该找规律找规律,想什么ksm,质数判断开根号. 除了1.2.3.5.7.11外,其余的数都可以通过4,6,9获 ...
- CodeForces 1082 E Increasing Frequency
题目传送门 题意:给你n个数和一个c, 现在有一个操作可以使得 [ l, r ]区间里的所有数都加上某一个值, 现在问你c最多可以是多少. 题解: pre[i] 代表的是 [1,i] 中 c 的个数是 ...
- codeforces 808 E. Selling Souvenirs (dp+二分+思维)
题目链接:http://codeforces.com/contest/808/problem/E 题意:最多有100000个物品最大能放下300000的背包,每个物品都有权值和重量,为能够带的最大权值 ...
- CVE-2019-0708远程桌面代码执行漏洞复现
漏洞环境 使用VMware 安装Windows7 SP1模拟受害机 利用 攻击工具准备 1.使用如下命令一键更新安装的metasploit框架 curl https://raw.githubuserc ...