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来控制元素运动,须要写非常多运动的 ...
随机推荐
- 80后，天才程序员， Facebook 第一任 CTO，看看开挂的人生到底有多变态？
鸡仔说:今天介绍一位天才程序员--亚当·德安格洛(Adam D'Angelo),他被<财富>杂志誉为"科技界最聪明的人之一",大学去了被誉为"天才" ...
- 使用 Docker Compose 快速构建 TiDB 集群
本文档介绍如何在单机上通过 Docker Compose 快速一键部署一套 TiDB 测试集群.Docker Compose 可以通过一个 YAML 文件定义多个容器的应用服务,然后一键启动或停止. ...
- 配置Office Excel运行Python宏脚本
基本环境 名称 版本 操作系统 Windows 10 x64 Office 2016 安装Python 1.下载Python安装包 登录https://www.python.org/downloads ...
- js中尺寸类样式
js中尺寸类样式 一:鼠标尺寸类样式 都要事件对象的配合 Tip:注意与浏览器及元素尺寸分开,鼠标类尺寸样式都是X,Y,浏览器及元素的各项尺寸时Height,Width 1:检测相对于浏览器的位置:e ...
- 微信小程序捕获async/await函数异常实践
背景 我们的小程序项目的构建是与web项目保持一致的,完全使用webpack的生态来构建,没有使用小程序自带的构建功能,那么就需要我们配置代码转换的babel插件如Promise.Proxy等:另外, ...
- box-sizing（CSS3）
CSS3新增了盒模型box-sizing,属性值有下面三个: content-box 默认值,让元素维持W3C的标准盒模型.元素的宽度/高度(width/height)= 元素内容框宽度/高度(con ...
- Spring Boot2 系列教程(二)创建 Spring Boot 项目的三种方式
我最早是 2016 年底开始写 Spring Boot 相关的博客,当时使用的版本还是 1.4.x ,文章发表在 CSDN 上,阅读量最大的一篇有 43W+,如下图: 2017 年由于种种原因,就没有 ...
- SQL数据同步到ELK（二）- Elastic Search 安装
开篇废话 没错,前面扯了一堆SQL SERVER,其实我连Elastic Search根本没动手玩过(是不是与时代有点脱节了?),那今天我就准备尝试安装一个ELK的简单集群出来(这个集群是使用我的小米 ...
- HBase工作中的一些优化方法
1.表的设计 Pre-creating Regions(预分区) 默认情况下,在创建Hbase表的时候会自动创建一个region分区,当导入数据的时候,所有的Hbase客户端都向这一个region写数 ...
- oracle用imp导入dmp文件
oracle命令行登录 sqlplus 用户名/密码 创建用户 create user 用户 identified by 密码 ; 创建表空间 create tablespace 表空间名 dataf ...