js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入
前言：
本人纯小白一个，有很多地方理解的没有各位大牛那么透彻，如有错误，请各位大牛指出斧正！小弟感激不尽。
本篇文章为您分析一下原生JS写 匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动
层层深入，到封装插件
基本功能：
补充:
补充中......
HTML结构【匀速运动】
<div id="div"></div>
<button id="btn">run</button>
CSS样式【匀速运动】
#oDiv {
width: 100px;
height: 100px;
background-color: burlywood;
position: absolute;
left: 0px;
top: 0px;
margin-top: 20px;
}
#btn {
margin-top: 150px;
}
JS行为【匀速运动】
大致原理
1. 使用定时器让某个元素一直运动
var oDiv = document.getElementById('oDiv');
var oBtn = document.getElementById('btn');
oBtn.onclick = function () {
// 默认运动的速度
var iSpeed = 4;
// 开启定时器
setInterval(function () {
// 当前元素的最新的left值 = 当前的left值 + 速度 + 像素
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
}, 30);
}
当我们点击按钮时 页面效果如下:
但是当我们连续点击按钮时 页面效果如下:
当我们连续点击按钮时 它会越来越快？
当你点击按钮时它会多次触发函数
当它多次触发这个函数，它就会多次启动定时器
因此我们需要设置定时器的id并伺机清除定时器
当你点击按钮时它会多次触发函数
当它多次触发这个函数，它就会多次启动定时器
因此我们需要设置定时器的id并伺机清除定时器
var oDiv = document.getElementById('oDiv');
var oBtn = document.getElementById('btn');
// 定义一个定时器的ID
var timer = null;
oBtn.onclick = function () {
// 每次点击时，清空定时器
clearInterval(timer);
// 默认运动的速度
var iSpeed = 4;
// 开启定时器
timer = setInterval(function () {
// 当前元素的最新的left值 = 当前的left值 + 速度 + 像素
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
}, 30);
}
页面效果如下:
当然，在页面中能动起来还不行，如果无法停止，那么用户体验也会非常的糟糕
因此，我们要让它到达某一个距离是可以停止运动
在 HTML结构 中添加一个span元素，并设置它的样式
因此，我们要让它到达某一个距离是可以停止运动
在 HTML结构 中添加一个span元素，并设置它的样式
<!-- HTML结构 -->
<div id="oDiv"></div>
<span></span>
<button id="btn">JS匀速运动</button>
<!-- CSS样式 -->
span {
position: absolute;
left: 400px;
top: 0;
margin-top: 20px;
width: 1px;
height: 100px;
background-color: black;
}
页面效果如下:
为了让它到达目标点后停止
我们需要在定时器里时刻监听他的值
我们需要在定时器里时刻监听他的值
var oDiv = document.getElementById('oDiv');
var oBtn = document.getElementById('btn');
// 定义一个定时器的ID
var timer = null;
oBtn.onclick = function () {
// 每次点击时，清空定时器
clearInterval(timer);
// 默认运动的速度
var iSpeed = 4;
// 开启定时器
timer = setInterval(function () {
// 每隔30毫秒执行这个函数，那么我们在这里判断当前位置是否到达目标点了
if(oDiv.offsetLeft == 400){
// 清空定时器
clearInterval(timer);
}else {
// 当前元素的最新的left值 = 当前的left值 + 速度 + 像素
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
}
}, 30);
}
页面效果如下:
此时看上去他是稳稳的停在了横线上
但是当我们把iSpeed改为7呢？
看如下效果图:
但是当我们把iSpeed改为7呢？
看如下效果图:
此时它并不会停在目标点上，而是直接越过去了
原因也很简单，因为7不是400的倍数
速度不停不停的去加，如果当前的位置距离目标点小于我一次走的距离的话（再加一次就越过去的时候）我就让它停止(清空定时器)
但是停止(清空定时器)之后，不是还差一点点吗？我们就让它等于目标点的距离(视觉上没有差别)
原因也很简单，因为7不是400的倍数
速度不停不停的去加，如果当前的位置距离目标点小于我一次走的距离的话（再加一次就越过去的时候）我就让它停止(清空定时器)
但是停止(清空定时器)之后，不是还差一点点吗？我们就让它等于目标点的距离(视觉上没有差别)
var oDiv = document.getElementById('oDiv');
var oBtn = document.getElementById('btn');
// 定义一个定时器的ID
var timer = null;
oBtn.onclick = function () {
// 每次点击时，清空定时器
clearInterval(timer);
// 默认运动的速度
var iSpeed = 7;
// 开启定时器
timer = setInterval(function () {
// 每隔30毫秒执行这个函数，那么我们在这里判断当前位置是否到达目标点了
// 目标点的距离 - 运动的总距离 < 速度
if(400 - oDiv.offsetLeft < iSpeed){
// 清空定时器
clearInterval(timer);
// 并设置当前的left值
oDiv.style.left = '400px';
}else {
// 当前元素的最新的left值 = 当前的left值 + 速度 + 像素
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
}
}, 30);
}
页面效果如下:
匀速运动的效果基本完成，这是从左向右运动
我们再扩展一下从右向左也可以正常的运动
让 #oDiv 的 left 值变成 800 看看
相应的速度也要发生变化
我们再扩展一下从右向左也可以正常的运动
让 #oDiv 的 left 值变成 800 看看
相应的速度也要发生变化
var oDiv = document.getElementById('oDiv');
var oBtn = document.getElementById('btn');
// 定义一个定时器的ID
var timer = null;
oBtn.onclick = function () {
// 每次点击时，清空定时器
clearInterval(timer);
// 默认运动的速度 判断移动的速度是正数还是负数 目标值 - 当前值 > 0 它的速度是正值否则为负值
var iSpeed = 400 - oDiv.offsetLeft > 0 ? 7 : -7;
// 开启定时器
timer = setInterval(function () {
// 每隔30毫秒执行这个函数，那么我们在这里判断当前位置是否到达目标点了
// 目标点的距离 - 运动的总距离 < 速度
if (400 - oDiv.offsetLeft < iSpeed) {
// 清空定时器
clearInterval(timer);
// 并设置当前的left值
oDiv.style.left = '400px';
} else {
// 当前元素的最新的left值 = 当前的left值 + 速度 + 像素
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
}
}, 30);
}
我们发现它并不是缓缓的移动而是瞬间就到达了目标点
关键就在于判断停止时(清空定时器)时的正负号
因此，我们应该在判断停止时(清空定时器)不考虑他们的正负号
关键就在于判断停止时(清空定时器)时的正负号
因此，我们应该在判断停止时(清空定时器)不考虑他们的正负号
var oDiv = document.getElementById('oDiv');
var oBtn = document.getElementById('btn');
// 定义一个定时器的ID
var timer = null;
oBtn.onclick = function () {
// 每次点击时，清空定时器
clearInterval(timer);
// 默认运动的速度 判断移动的速度是正数还是负数 目标值 - 当前值 > 0 它的速度是正值否则为负值
var iSpeed = 400 - oDiv.offsetLeft > 0 ? 7 : -7;
// 开启定时器
timer = setInterval(function () {
// 每隔30毫秒执行这个函数，那么我们在这里判断当前位置是否到达目标点了
// 绝对值 目标点的距离 - 运动的总距离 < 绝对值 速度
if (Math.abs(400 - oDiv.offsetLeft) < Math.abs(iSpeed)) {
// 清空定时器
clearInterval(timer);
// 并设置当前的left值
oDiv.style.left = '400px';
} else {
// 当前元素的最新的left值 = 当前的left值 + 速度 + 像素
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
}
}, 30);
}
页面效果如下:
这样我们就把JS的匀速运动效果完成了
下面提供插件版源码
下面提供插件版源码
JS匀速运动 （插件版）
/**
* 匀速运动
* @param {*} dom 运动DOM元素
* @param { Number } target 运动到的目标点
* @param { Number } speed 运动的速度
*/
var timer = null;
function startMove(dom, target, speed) {
clearInterval(timer);
// 设置速度 判断目标值 - 当前的left
var iSpeed = target - dom.offsetLeft > 0 ? speed : -speed;
timer = setInterval(function () {
if (Math.abs(target - dom.offsetLeft) < Math.abs(iSpeed)) {
dom.style.left = target + 'px';
clearInterval(timer);
} else {
// dom的最新的left值 = 当前的left + 速度
dom.style.left = dom.offsetLeft + iSpeed + 'px';
}
}, 30);
}
// 这样使用
oBtn.onclick = function () {
startMove(oDiv, 400, 7);
}
HTML结构【缓冲运动】
速度在逐渐减小的运动，物体的速度，距离目标点越近就越小，当到达目标点时，速度为0
<!-- HTML结构 -->
<div id="oDiv"></div>
<span></span>
<button id="btn">JS缓冲运动</button>
CSS样式【缓冲运动】
#oDiv {
width: 100px;
height: 100px;
background-color: burlywood;
position: absolute;
left: 800px;
top: 0px;
margin-top: 20px;
}
#btn {
margin-top: 150px;
}
span {
position: absolute;
left: 400px;
top: 0;
margin-top: 20px;
width: 1px;
height: 100px;
background-color: black;
}
JS行为【缓冲运动】
var oDiv = document.getElementById('oDiv');
var oBtn = document.getElementById('btn');
oBtn.onclick = function () {
startMove(oDiv, 400);
}
// 定义一个定时器的ID
var timer = null;
function startMove(dom, target) {
// 每次点击时，清空定时器
clearInterval(timer);
// 默认运动的速度 我们让它一开始为空值
var iSpeed = null
// 开启定时器
timer = setInterval(function () {
// 第一步: 考虑如何能让这个速度距离目标点越近速度越小呢？
// (当前点距离目标点更近一步,如果不考虑缓冲，直接赋值dom.style.left = dom.offsetLeft + iSpeed + 'px';它就直接完成了) 为了达到缓冲的效果，我们要让它除一个数，这个数随便你定
iSpeed = parseInt(target - dom.offsetLeft) / 7;
// 清空定时器
// 每隔30毫秒执行这个函数，那么我们在这里判断当前位置是否到达目标点了
// 绝对值 目标点的距离 - 运动的总距离 < 绝对值 速度
if (dom.offsetLeft == target) {
clearInterval(timer);
} else {
// 当前元素的最新的left值 = 当前的left值 + 速度 + 像素
dom.style.left = dom.offsetLeft + iSpeed + 'px';
}
}, 30);
}
页面效果如下:
在定时器中打印iSpeed看看
会发现它并没有完全到达目标点就停止了总是会差那么几像素
行间样式像素的小数会被忽略
我们要对它进行取整
行间样式像素的小数会被忽略
我们要对它进行取整
// 定义一个定时器的ID
var timer = null;
function startMove(dom, target) {
// 每次点击时，清空定时器
clearInterval(timer);
// 默认运动的速度 我们让它一开始为空值
var iSpeed = null
// 开启定时器
timer = setInterval(function () {
// 第一步: 考虑如何能让这个速度距离目标点越近速度越小呢？
// (当前点距离目标点更近一步,如果不考虑缓冲，直接赋值dom.style.left = dom.offsetLeft + iSpeed + 'px';它就直接完成了) 为了达到缓冲的效果，我们要让它除一个数，这个数随便你定
iSpeed = parseInt(target - dom.offsetLeft) / 7;
console.log(iSpeed);
// 第二步: 判断速度的正负值
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
// 清空定时器
// 每隔30毫秒执行这个函数，那么我们在这里判断当前位置是否到达目标点了
// 第三步: 如果当前的距离等于了目标距离
if (dom.offsetLeft == target) {
// 清空定时器 停止运动
clearInterval(timer);
} else {
// 当前元素的最新的left值 = 当前的left值 + 速度 + 像素
dom.style.left = dom.offsetLeft + iSpeed + 'px';
}
}, 30);
}
页面效果如下:
下面我们利用缓冲运动实现一个小Demo
HTML结构
<div class="wrapper">
<span></span>
</div>
CSS样式
.wrapper {
width: 400px;
height: 80px;
background-color: blue;
position: absolute;
left: -400px;
top: 200px;
cursor: pointer;
}
.wrapper span {
width: 50px;
height: 80px;
background-color: burlywood;
position: absolute;
right: -50px;
top: 0px;
}
JS行为
var oDiv = document.querySelector('.wrapper');
var timer = null;
oDiv.onmouseenter = function () {
startMove(this, 0);
}
oDiv.onmouseleave = function () {
startMove(this, -400);
}
function startMove(dom, target) {
clearInterval(timer);
var iSpeed = null;
timer = setInterval(function () {
iSpeed = (target - dom.offsetLeft) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (dom.offsetLeft == target) {
dom.style.left = target + 'px';
clearInterval(timer);
} else {
dom.style.left = dom.offsetLeft + iSpeed + 'px';
}
}, 30);
}
页面效果如下:
对于宽高位置的运动是完成了，但是还有透明度的运算没有实现
下面我们来实现以下透明度的运动方式
下面我们来实现以下透明度的运动方式
HTML结构【缓冲运动-----透明度】
<!-- HTML结构 -->
<div id="oDiv"></div>
<span></span>
<button id="btn">JS缓冲运动</button>
CSS样式【缓冲运动-----透明度】
#oDiv {
width: 100px;
height: 100px;
background-color: burlywood;
position: absolute;
left: 700px;
top: 0px;
margin-top: 20px;
opacity: 1;
}
#btn {
margin-top: 150px;
}
span {
position: absolute;
left: 400px;
top: 0;
margin-top: 20px;
width: 1px;
height: 100px;
background-color: black;
}
JS行为【缓冲运动-----透明度】
我们希望点击他是透明度从1变成0.5的缓冲效果
var oDiv = document.getElementById('oDiv');
var oBtn = document.getElementById('btn');
oBtn.onclick = function () {
startMove(oDiv, 0.5);
}
// 获取计算样式的方法
function getStyle(dom, attr) {
// 做兼容处理
if (window.getComputedStyle) {
// 通用版本 传null是不去获取伪类的样式
return window.getComputedStyle(dom, null)[attr];
} else {
// 老版本的ie
return dom.currentStyle[attr];
}
}
var timer = null;
function startMove(dom, target) {
// 每次点击时，清空定时器
clearInterval(timer);
// 默认运动的速度 我们让它一开始为空值
var iSpeed = null;
// 第一步: 定义一个透明度当前值，默认为空值
var iCur = null;
// 开启定时器
timer = setInterval(function () {
// 第二步: 获取透明度值
iCur = parseFloat(getStyle(dom, 'opacity'));
// 第三步: 速度 = 目标值 - 透明度当前值 / 随机一个数
iSpeed = (target - iCur) / 7;
// 速度判断正负值
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
// 第四步: 如果当前透明度值 = 目标值
if (iCur == target) {
// 清空定时器 停止运动
clearInterval(timer);
} else {
// 第五步: 设置透明度 = 当前透明度 + 速度
dom.style.opacity = iCur + iSpeed;
}
}, 30);
}
页面效果如下:
发现它会一闪一闪的
此时它的透明度不是0就是1
因此我们需要处理一下他的值
此时它的透明度不是0就是1
因此我们需要处理一下他的值
// 第二步: 获取透明度值 扩大100倍
iCur = parseFloat(getStyle(dom, 'opacity')) * 100;
// 设置透明度 = 当前透明度 + 速度 缩小100倍
dom.style.opacity = (iCur + iSpeed) / 100;
oBtn.onclick = function () {
// 调用时也扩大100倍
startMove(oDiv, 50);
}
页面效果如下:
有了上面这些函数的基础之后
下面我们进一步开始封装一个未来可以重复使用的运动函数
下面我们进一步开始封装一个未来可以重复使用的运动函数
HTML结构【多物体同一个值运动】
<br/>
<div style="background-color: aqua";>
页面效果如下:
</div>
<br/>
## JS行为【多物体同一个值运动】
```js
// 循环绑定点击事件
for (var i = 0; i < oDiv.length; i++) {
// 移入事件
oDiv[i].onmouseenter = function () {
startMove(this, 400)
}
// 移出事件
oDiv[i].onmouseleave = function () {
startMove(this, 100)
}
}
// 获取计算样式的方法
function getStyle(dom, attr) {
// 做兼容处理
if (window.getComputedStyle) {
// 通用版本 传null是不去获取伪类的样式
return window.getComputedStyle(dom, null)[attr];
} else {
// 老版本的ie
return dom.currentStyle[attr];
}
}
var timer = null;
function startMove(dom, target) {
// 每次点击时，清空定时器
clearInterval(timer);
// 默认运动的速度 我们让它一开始为空值
var iSpeed = null;
// 定义一个透明度当前值，默认为空值
var iCur = null;
// 开启定时器
timer = setInterval(function () {
// 第一步: 获取宽度
iCur = parseInt(getStyle(dom, 'width'));
iSpeed = (target - iCur) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur == target) {
clearInterval(timer);
} else {
// 第二步: 设置宽度
dom.style.width = iCur + iSpeed + 'px';
}
}, 30);
}
页面效果如下:
但是当我们快速移入时
导致这个问题归根结底同一时间只能有一个定时器触发
我们给每一个定时器给一个自己的id
我们给每一个定时器给一个自己的id
// 添加dom.timer
clearInterval(dom.timer);
// 添加dom.timer
dom.timer = setInterval(function () {
// 第一步: 获取宽度
iCur = parseInt(getStyle(dom, 'width'));
iSpeed = (target - iCur) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur == target) {
// 添加dom.timer
clearInterval(dom.timer);
} else {
// 第二步: 设置宽度
dom.style.width = iCur + iSpeed + 'px';
}
}, 30);
页面效果如下:
如果我们上面的都完成了的话
下面我们再进行扩张
多物体不同值的运动
下面我们再进行扩张
多物体不同值的运动
HTML结构【多物体不同值运动】
<div></div>
<div></div>
<div></div>
<div></div>
CSS样式【多物体不同值运动】
div {
width: 100px;
height: 100px;
background-color: red;
opacity: 1;
margin-bottom: 100px;
}
JS行为【多物体不同值运动】
var oDivArray = document.querySelectorAll('div');
// var oDiv = document.getElementById('oDiv');
// var oBtn = document.getElementById('btn');
// oBtn.onclick = function () {
// // 调用时也扩大100倍
// startMove(oDiv, 50);
// }
oDivArray[0].onclick = function () {
startMove(this, 'width', 400);
}
oDivArray[1].onclick = function () {
startMove(this, 'height', 400);
}
oDivArray[2].onclick = function () {
startMove(this, 'borderWidth', 40);
}
oDivArray[3].onclick = function () {
startMove(this, 'opacity', 50);
}
// 获取计算样式的方法
function getStyle(dom, attr) {
// 做兼容处理
if (window.getComputedStyle) {
// 通用版本 传null是不去获取伪类的样式
return window.getComputedStyle(dom, null)[attr];
} else {
// 老版本的ie
return dom.currentStyle[attr];
}
}
var timer = null;
/**
* 多物体不同值运动
* @param {*} dom 运动DOM元素
* @param {*} attr 属性
* @param {Number} target 运动到的目标点
*/
function startMove(dom, attr, target) {
// 每次点击时，清空定时器
clearInterval(dom.timer);
// 默认运动的速度 我们让它一开始为空值
var iSpeed = null;
// 定义一个透明度当前值，默认为空值
var iCur = null;
// 开启定时器
dom.timer = setInterval(function () {
// 第一步: 判断如果是opacity
if (attr == 'opacity') {
// 获取 opacity parseFloat浮点 因为 透明度是 0 - 1 可以是0.1 ~ 1
iCur = parseFloat(getStyle(dom, attr)) * 100;
} else {
// 获取 attr 的 parseInt 整数 0 ~ +∞
iCur = parseInt(getStyle(dom, attr))
}
iSpeed = (target - iCur) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur == target) {
clearInterval(dom.timer);
}
// 第二步: 判断如果是opacity
if (attr == 'opacity') {
dom.style.opacity = (iCur + iSpeed) / 100;
} else {
dom.style[attr] = iCur + iSpeed + 'px';
}
}, 30)
}
如果我们上面的都完成了的话
下面我们再进行扩张
多物体多值的运动 + 回调机制
下面我们再进行扩张
多物体多值的运动 + 回调机制
HTML结构【多物体多值的运动 + 回调机制】
<div id="topDiv"></div>
<div id="bottomDiv"></div>
CSS样式【多物体多值的运动 + 回调机制】
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: red;
opacity: 1;
}
#topDiv {
top: 200px;
}
#buttomDiv {
top: 400px;
}
JS行为【多物体多值的运动 + 回调机制】
// 获取计算样式的方法
function getStyle(dom, attr) {
// 做兼容处理
if (window.getComputedStyle) {
// 通用版本 传null是不去获取伪类的样式
return window.getComputedStyle(dom, null)[attr];
} else {
// 老版本的ie
return dom.currentStyle[attr];
}
}
var timer = null;
/**
* 多物体多值的运动 + 回调机制
* @param {*} dom 运动DOM元素
* @param {*} attrObj 属性对象
* @param {Number} target 运动到的目标点
*/
function startMove(dom, attrObj, callback) {
// 每次点击时，清空定时器
clearInterval(dom.timer);
// 默认运动的速度 我们让它一开始为空值
var iSpeed = null;
// 定义一个透明度当前值，默认为空值
var iCur = null;
// 开启定时器
dom.timer = setInterval(function () {
// 第四步: 定义一个锁，用来判断所有属性是否运动完，默认开启。
var bStop = true;
// 第一步: for in循环每一项
for (var attr in attrObj) {
//判断如果是opacity
if (attr == 'opacity') {
// 获取 opacity parseFloat浮点 因为 透明度是 0 - 1 可以是0.1 ~ 1
iCur = parseFloat(getStyle(dom, attr)) * 100;
} else {
// 获取 attr 的 parseInt 整数 0 ~ +∞
iCur = parseInt(getStyle(dom, attr));
}
// 第二步: 设置属性的速度
iSpeed = (attrObj[attr] - iCur) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
// 判断如果是opacity
if (attr == 'opacity') {
dom.style.opacity = (iCur + iSpeed) / 100;
} else {
// 第三步: 设置对应属性的值
dom.style[attr] = iCur + iSpeed + 'px';
}
// 第五步: 判断属性如果有 一项没有运动结束
if (iCur != attrObj[attr]) {
bStop = false;
}
}
// 第六步: 循环结束后判断bStop属性是否为开启状态
if (bStop) {
// 清空定时器 停止运动
clearInterval(dom.timer);
callback();
// 第七步: 调用回调函数
typeof callback == 'function' && callback();
console.log('over');
}
}, 30);
}
// 调用时这样调用
var oTopDiv = document.getElementById('topDiv');
var oBottomDiv = document.getElementById('buttomDiv');
oTopDiv.onclick = function () {
startMove(this, { width: 400, height: 400, left: 200, top: 300, opacity: 50 }, function () {
startMove(oBottomDiv, { width: 400, height: 400, left: 200, top: 300, opacity: 50 }, function () {
alert('over');
})
})
}
页面效果如下:
这样我们的JS运动基本就封装完成了
结语
整完！！！
js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入的更多相关文章
- js 运动函数篇(二) （加速度运动、弹性运动、重力场运动（多方向+碰撞检测+重力加速度+能量损失运动）拖拽运动）层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写加速度运动.弹性运动.重力场运 ...
- JS里面的两种运动函数
最新学了一个新的运动函数,与最初学习的有所不同,第一个运动是根据运动速度完成运动 ,第二个则是根据运动的时间来完成运动,而且把之前的函数都进行了一些兼容处理,在这里列出了看一下: 第一种animate ...
- 原生JS封装时间运动函数
/*讲时间运动之前先给大家复习一下运动函数 通常大家都会写运动框架,一个定时器(Timer),一个步长(step 就是每次运动的距离),一个当前位置(current)一个目标位置(target),然后 ...
- 运动函数封装（js）
// 运动函数 function starMove(obj,json,fnEnd){ clearInterval(obj.timer); obj.timer = setInterval(functi ...
- JS错误记录 - 右侧悬浮框 - 缓冲运动
本次练习错误总结: 1. 正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...
- Javascript之封装运动函数
@ 目录 阶段一.仅适用单位带px属性的匀速运动 阶段二.可适用单位不带px属性(如opacity)的匀速运动 阶段三.适用于多元素单一属性的匀速运动 阶段四.适用于多元素单一属性的匀速或缓冲运动 阶 ...
- 原生JavaScript运动功能系列（一）：运动功能剖析与匀速运动实现
在我们日常生活中运动就是必不可少的部分,走路.跑步.打篮球等.在网页交互设计上运动也是必不可少的部分,创建的网站交互设计运动模块有轮播图,下拉菜单,还有各种炫酷的游戏效果都跟运动密切相关.所以很重要, ...
- JavaScript--封装好的运动函数+旋转木马例子
封装好的运动函数: 1.能控制目标元素的多种属性 2.能自动获取元素的样式表: 3.获取样式函数兼容 4.能对于元素的多属性进行动画(缓动动画)修改 5.能区分透明度等没单位的属性和px属性的变化 a ...
- JS对象继承篇
JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person() ...
随机推荐
- M - 诡异的楼梯 HDU - 1180(BFS + 在某个点等待一下 / 重复走该点)
M - 诡异的楼梯 HDU - 1180 Hogwarts正式开学以后,Harry发现在Hogwarts里,某些楼梯并不是静止不动的,相反,他们每隔一分钟就变动一次方向. 比如下面的例子里,一开始楼梯 ...
- 201771010108-韩腊梅《面向对象程序设计（java）》第二周学习总结
201771010108<面向对象程序设计(java)>第二周学习总结 第一部分:理论知识学习部分 第三章:Java的基本程序设计结构 1.标识符:① 标识符由字母.下划线.美元符号和数字 ...
- css布局之盒模型
盒模型 导读 随着网络技术的不断发展,人们已经不再只关注网页的功能,还追求网页的性能和美观,于是css应运而生,一个完美的网页必然有一个完美的布局,而css盒模型是网页布局的基石,所以了解它对网页制作 ...
- 在docker中部署redis主从配置
环境说明: 阿里云服务器 Ubuntu 16.04 docker 1.拉取Redis镜像 docker pull redis 2.配置Redis启动配置文件,此处我创建一个专用目录,存放Redis相关 ...
- Java HashMap源码详解
Java数据结构-HashMap 目录 Java数据结构-HashMap 1. HashMap 1.1 HashMap介绍 1.1.1 HashMap介绍 1.1.2 HashMap继承图 1.2 H ...
- C++动态内存new和delete（超详细）
C++动态内存new和delete C++动态内存是C++灵活.炫酷的一种操作.学好它,能让自己编程逼格上一个level. 在学习动态内存之前,我们先要了解C++是怎么划分内存的: 栈:在函数内部声明 ...
- 理解 Hanoi 汉诺塔非递归算法
汉诺塔介绍: 汉诺塔(港台:河内塔)是根据一个传说形成的数学问题: 最早发明这个问题的人是法国数学家爱德华·卢卡斯. 传说越南河内某间寺院有三根银棒,上串 64 个金盘.寺院里的僧侣依照一个古老的预言 ...
- python socket简介
一.socket是什么 socket是应用层与TCP/IP协议通信的中间软件抽象层,它是一组接口.在设计模式中,socket其实就是一个门面模式,它把复杂的TCP/IP协议隐藏在socket接口后面, ...
- linux基础篇，数据流重定向
数据流重定向 很多时候,我们执行一些命令的时候,会在屏幕中得到这些命令的执行结果.这些叫作标准输出. 但是很多情况下,我们并不想将这些信息直接显示在屏幕上,这个时候,就得用重定向这个功能了 标准输入 ...
- Linux 磁盘管理篇，连接文件
连接文件分为两种 1.像Window类似的快捷方式的文件 2.通过文件系统的inode来产生新的文件名而不是新文件(硬连接) 创建连接文件 ln 创建连接文件的快捷方式 ...