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来控制元素运动,须要写非常多运动的 ...
随机推荐
- Guava google缓存机制
易百教程java学习http://www.yiibai.com/v3.php?app=all
- three.js实现球体地球城市模拟迁徙
概况如下:1.SphereGeometry实现自转的地球:2.THREE.ImageUtils.loadTexture加载地图贴图材质:3.THREE.Math.degToRad,Math.sin,M ...
- 快速了解会话管理三剑客cookie、session和JWT
更多内容,欢迎关注微信公众号:全菜工程师小辉.公众号回复关键词,领取免费学习资料. 存储位置 三者都是应用在web中对http无状态协议的补充,达到状态保持的目的 cookie:cookie中的信息是 ...
- 边缘缓存模式(Cache-Aside Pattern)
边缘缓存模式(Cache-Aside Pattern),即按需将数据从数据存储加载到缓存中.此模式最大的作用就是提高性能减少不必要的查询. 1 模式 先从缓存查询数据 如果没有命中缓存则从数据存储查询 ...
- 剑指Offer（二十八）：数组中出现次数超过一半的数字
剑指Offer(二十八):数组中出现次数超过一半的数字 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn. ...
- springboot-vue前后端分离session过期重新登录
springboot-vue前后端分离session过期重新登录 简单回顾cookie和session cookie和session都是回话管理的方式 Cookie cookie是浏览器端存储信息的一 ...
- 关于turtle画蟒蛇小实例
import turtle turtle.setup(800,600) turtle.pensize(25) turtle.pencolor('blue') turtle.penup() #抬笔 tu ...
- vmware中设置ubuntu静态ip
概括一下过程中遇到的三个问题: 1.如何修改虚拟机为静态ip并且生效 2.设置完静态ip后,无法上网 3.设置完静态ip且能上网后,宿主机无法ping通虚拟机 问题1:参考https://www.ji ...
- java设计模式8.迭代子模式、责任链模式、命令模式
迭代子模式 迭代子模式可以顺序地访问一个聚集中的元素而不必暴露聚集的内部表象.它将迭代逻辑封装到一个独立的迭代子对象中,从而与聚集本身分开.迭代子对象是对遍历的抽象化,不同的聚集对象可以提供相同的迭代 ...
- 【selenium】- webdriver常见元素定位（下）
本文由小编根据慕课网视频亲自整理,转载请注明出处和作者. 1.table 表格如下: 使用firebug查看: 代码实现: 1)显示出表格所有内容 2)显示表格某个特定的数值 自动化测试框架: 关键字 ...