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来控制元素运动,须要写非常多运动的 ...
随机推荐
- wcf项目跨域问题处理
最近做了一个wcf项目,请求发起的项目是一个webform项目,所以这是分开的两个项目端口必然不一样,理所当然存在跨域问题. 有的人当下就反应过来jsonp,jsonp只能用于get请求,对于参数比较 ...
- Leetcode之深度优先搜索（DFS）专题-129. 求根到叶子节点数字之和（Sum Root to Leaf Numbers）
Leetcode之深度优先搜索(DFS)专题-129. 求根到叶子节点数字之和(Sum Root to Leaf Numbers) 深度优先搜索的解题详细介绍,点击 给定一个二叉树,它的每个结点都存放 ...
- [Python] 常见的排序与搜索算法
说明: 本文主要使用python实现常见的排序与搜索算法:冒泡排序.选择排序.插入排序.希尔排序.快速排序.归并排序以及二分查找等. 对算法的基本思想作简要说明,只要理解了基本的思想,与实现语言无关. ...
- qt学习笔记（1）：qt点击运行没有反应。
因为公司的项目需要,今天开始重新学习已经忘干净了的QT, 说起qt之前在学校刚接触的时候就打心底里喜欢这个编辑器, 因为一直使用vs做项目,面对着黑洞洞的窗口总让人不舒服, 自从接触了qt感觉迎来了曙 ...
- API 资源隔离系统设计与实现
(马蜂窝技术原创内容,公众号 ID:mfwtech) Part 1 背景 大交通业务需要对接机票.火车票.租车.接送机等业务的外部供应链,供应商的数据接口大部分通过 HTTP.HTTPS 等协议进行通 ...
- Linux中JDK安装配置
安装jdk 1)下载地址:https://www.oracle.com/technetwork/java/javase/downloads/index.html 我选择jdk1.8版本 2)上传至服务 ...
- NLP（六） 分块、句法分析、依存分析
内置分块器 分块:从文本中抽取短语 import nltk text = 'Lalbagh Botanical Garden is a well known botanical garden in B ...
- 牛客暑假多校第五场 D inv
题意:给你一个n, 接来下给你一个 [1,n] 中偶数的排列, 还有一个 [1, n] 中 奇数 按照递增的顺序排列, 现在求一个原数列, 使得偶数列排序 和 奇数列 都是原数列的一个子序列, 现在求 ...
- 玲珑杯 1137 - Sin your life（数学）
题目链接:http://www.ifrog.cc/acm/problem/1137 题解:设m=n-z sin(x)+sin(y)=sin(m-y)+sin(y)利用公式得最大值为sqrt(sin(m ...
- Spreading the Wealth uva 11300
A Communist regime is trying to redistribute wealth in a village. They have have decided to sit ever ...