Exigence : Cliquez sur la zone div pour la déplacer vers la droite de 100px
Rubrique HTML et CSS
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
}
.box2 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 200px;
left: 0;
}
</style>
<div class="box"></div>
<div class="box2"></div>
Partie JS (version de base)
<script>
//封装一个运动函数
function move(ele,type,target){
* ele:表示移动哪个元素
* type:修改哪个属性
* target:移动的目标距离
let count = 0
const timer = setInterval(function(){
count += 5
ele.style[type] = count + 'px'
if(count == target){
clearInterval(timer)
}
},50)
}
const box = document.querySelector('.box')
const box2 = document.querySelector('.box2')
box.onclick = function () {
move(this, 'left', 200)
}
box2.onclick = function () {
move(this, 'left', 100)
}
</script>
Ensuite, grâce au fonctionnement du code ci-dessus, nous pouvons constater qu'il y a un problème, c'est-à-dire que la version de base de la fonction de mouvement se déplacera de la position 0 à chaque fois que vous cliquez sur div. La raison en est que la valeur initiale de la fonction de mouvement est une solution
à partir de 0.
Partie JS (version de base 2)
<script>
// 封装一个运动函数
function move(ele, type, target) {
// 获取元素本身的值, 依次作为运动点
let count = parseInt(window.getComputedStyle(ele)[type])
const timer = setInterval(function () {
count += 5
ele.style[type] = count + 'px'
if (count == target) {
clearInterval(timer)
}
}, 50)
}
const box = document.querySelector('.box')
const box2 = document.querySelector('.box2')
box.onclick = function () {
move(this, 'left', 200)
}
box2.onclick = function () {
move(this, 'top', 400)
}
</script>
Problème : lors du déplacement de 200 à 501, il ne s'arrêtera pas.
Raison : la distance de déplacement n'est pas un multiple entier de chaque mouvement. Maintenant, commencez à vous déplacer de 200 et passez à 501. La distance de déplacement est de 301, 301 n'est pas un entier multiple de chaque mouvement.
Solution :
- L'inconvénient est que la distance de déplacement est modifiée à 1 à chaque
fois et que la vitesse de déplacement est fixe. Si la distance de déplacement est différente, le temps sera différent - 1/10 de la distance totale parcourue à chaque fois (vitesse constante)
commence maintenant à se déplacer de 200, se déplace à 501, se déplace sur une distance de 301 et
se déplace de 30,1 à chaque fois
commence maintenant à se déplacer à partir de 300, se déplace de 501, se déplace sur une distance de 201
et se déplace de 20,1 chacun temps
1/10
de la distance restante pour chaque déplacement (réduction
de la vitesse) distance 90
maintenant déplacer 90/10 === 9
Partie JS (version avancée 1)
<script>
// 0. 封装一个运动函数
function move(ele, type, target) {
const timer = setInterval(function () {
// 1. 获取当前的位置
let count = parseInt(window.getComputedStyle(ele)[type])
// 2. 计算要移动的距离 (目标 - 当前的值) / 10
let des = (target - count) / 10
// 3. 判断是否需要继续移动
if (target === count) {
// 3.1 此时说明移动到了, 可以结束定时器
clearInterval(timer)
} else {
// 3.2 此时说明还没有移动到, 需要继续移动
ele.style[type] = count + des + 'px'
}
}, 20)
}
const box = document.querySelector('.box')
const box2 = document.querySelector('.box2')
box.onclick = function () {
move(this, 'left', 501)
// move(this, 'top', 200)
}
box2.onclick = function () {
move(this, 'left', 100)
}
</script>
Problème : ne s'est pas déplacé à la distance spécifiée
Raison : la position actuelle de 91px doit être déplacée vers 100px, la distance de déplacement suivante (100 - 91) / 10 === 0,9 La
distance de déplacement actuelle doit être de 91 + 0,9 + 'px ' == = 91.9px
mais la distance de déplacement minimale reconnue par le navigateur est de 1px, donc lorsque l'affectation passe à 91.9px, la position réelle est toujours de 91px
Solution : Arrondissez la distance de déplacement
Nouveau problème :
la position actuelle de 9px doit déplacer 0px, la prochaine fois Distance de déplacement (0 - 9) / 10 === -0.9
Puis on arrondit la valeur mobile -0.9 => 0
pour résoudre : lorsque la valeur mobile est supérieure à 0, arrondir vers le haut, sinon arrondir vers le bas
Partie JS (version avancée 2)
<script>
// 0. 封装一个运动函数
function move(ele, type, target) {
const timer = setInterval(function () {
// 1. 获取当前的位置
let count = parseInt(window.getComputedStyle(ele)[type])
// 2. 计算要移动的距离 (目标 - 当前的值) / 10
let des = (target - count) / 10
// 大于0 向上取整, 小于0 向下取整
des = des > 0 ? Math.ceil(des) : Math.floor(des)
// 3. 判断是否需要继续移动
if (target === count) {
// 3.1 此时说明移动到了, 可以结束定时器
clearInterval(timer)
} else {
// 3.2 此时说明还没有移动到, 需要继续移动
ele.style[type] = count + des + 'px'
}
}, 20)
}
const box = document.querySelector('.box')
const box2 = document.querySelector('.box2')
box.onclick = function () {
move(this, 'left', 0)
}
box2.onclick = function () {
move(this, 'left', 100)
}
</script>