Maison > Article > interface Web > Quel est le code source de js facilitant l'encapsulation des animations ? (exemple de code)
Quel est le code source de js facilitant l'encapsulation des animations ? (exemple de code)
- 云罗郡主avant
- 2018-10-19 14:17:032495parcourir
Le contenu de cet article porte sur quel est le code source de js facilitant l'encapsulation d'animation ? (Exemple de code) a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.
Principalement utilisé offsetLeft, Math.ceil, Math.floor, Math.abs.
Notez que la valeur obtenue par offsetLeft est la valeur arrondie de style.left, offsetLeft = Math.round (la partie numérique de style.left), par exemple, style.left = 369.4px, le offsetLeft obtenu = 369.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缓动动画</title>
<style>
#slow_action {
width: 100px;
height: 100px;
background: pink;
position: absolute;
}
</style>
</head>
<body>
<button id="btn1">运动到400</button>
<button id="btn2">运动到0</button>
<p id="slow_action"></p>
</body>
<script>
var btn1 = document.getElementById("btn1")
var btn2 = document.getElementById("btn2")
var p = document.getElementById("slow_action")
/**
* 动画原理 = 盒子位置 + 步长（步长越来越小）
* 盒子位置 = 盒子本身的位置 + (目标位置 - 盒子本身位置)/10
*/
btn1.onclick = function () {
fn(p,400)
}
btn2.onclick = function () {
fn(p,0)
}
function fn(ele, target) {
clearInterval(ele.timer);
ele.timer = setInterval(function () {
// var target = 400;
//最后10像素都是1px向目标位置移动 最后到达指定位置
var step = (target - ele.offsetLeft)/10;
//差值大于10的时候向上取整 小于0的时候向下取整
step = step > 0 ? Math.ceil(step) : Math.floor(step)
ele.style.left = ele.offsetLeft + step + "px";
//检测定时器是否停止
console.log(1)
//跳出条件 目标位置-当前位置的绝对值，小于步长
if(Math.abs(target - ele.offsetLeft) < Math.abs(step)) {
ele.style.left = target + "px";
clearInterval(ele.timer)
}
}, 30);
}
</script>
</html>Ce qui précède est quel est le code source de js facilitant l'encapsulation des animations ? (Exemples de code) introduction complète, si vous souhaitez en savoir plus sur le Tutoriel vidéo JavaScript, veuillez faire attention au site Web PHP chinois.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!