Cet article présente principalement le JavaScriptMotionFramework en détail à tout le monde. La quatrième partie, le mouvement à valeurs multiples, a une certaine valeur de référence. 🎜>
Mouvement à valeurs multiples, c'est-à-dire que pour un certainobjet, non seulement une des valeurs attribut change, mais plusieurs, telles que la largeur, la hauteur , la police, la transparence, etc. changent en même temps
json ! Le problème qui se pose facilement est celui mentionné ci-dessus. La fonction de vitesse commune est utilisée ici, mais certaines valeurs d'attribut sont comprises entre 100 –> 600. Vous devez attendre. Ce n'est que lorsque la valeur d'attribut la plus longue atteint la valeur cible que le timer appartenant à l'obj peut être fermé. L'idée de conception est de définir un bStob = true à chaque fois que la fonction d'interrogation est exécutée lors du parcours et de l'analyse de l'objet. attributs dans json, tant que la valeur cible n'est pas atteinte, l'attribut value est défini sur false, de sorte que le minuteur ne sera pas désactivé Même si certaines valeurs d'attribut ont atteint le point final, l'interrogation sera toujours effectuée. scannant à ce moment-là, mais la vitesse de déplacement de l'attribut est de 0 à ce moment-là, et il ne fera pas d'exercice. Autrement dit, avant :
if(attr == cur) {
cleartInterval(obj.timer);
}if (bStop) {
clearInterval(obj.timer);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>运动框架(四)：多值运动</title>
<style type="text/css">
p {
width: 100px;
height: 100px;
background: orange;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
var op = document.getElementById('p1');
op.onmouseover = function() {
var json = {
width: 600,
height: 200,
opacity: 30
};
startMove(this, json);
};
op.onmouseout = function() {
var json = {
width: 100,
height: 100,
opacity: 100
};
startMove(this, json);
};
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, json) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var bStop = true;
for (var attr in json) {
var cur = 0;
if (attr === 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - cur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur != json[attr]) {//凡是有未到达目标点的，一律不让定时器停下，否则有的属性不能到达目标值
bStop = false;
}
if (attr === 'opacity') {
cur += speed;
obj.style.filter = 'alpha(opacity:' + cur + ')';
obj.style.opacity = cur / 100;//Chrome,IE
} else {
obj.style[attr] = cur + speed + 'px';
}
}
//整个循环结束后，仍然保持着true，说明没有没到达目标值的属性，也就是都到了
if (bStop) {
clearInterval(obj.timer);//说明所有的属性都到达了目标值
}
}, 30);
}
</script>
</body>
</html>
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
