Heim > Artikel > Web-Frontend > Eine ausführliche Einführung in mehrwertige Bewegungen im JavaScript-Bewegungsframework (4)
Eine ausführliche Einführung in mehrwertige Bewegungen im JavaScript-Bewegungsframework (4)
- 黄舟Original
- 2017-05-21 13:24:311224Durchsuche
Dieser Artikel stellt hauptsächlich das JavaScriptFramework im Detail vor. Der vierte Teil, die mehrwertige Bewegung, hat einen gewissen Referenzwert
Mehrwertige Bewegung, das heißt, für ein bestimmtesObjekt ändert sich nicht nur einer der Attributwerte, sondern mehrere, wie zum Beispiel Breite, Höhe , Schriftart, Transparenz usw. ändern sich gleichzeitig
json! Das Problem, das leicht auftritt, ist wie oben erwähnt. Die übliche Geschwindigkeitsfunktion wird hier verwendet, aber einige Attributwerte liegen zwischen 100 und 101, und einige Attributwerte liegen zwischen 100 und gt; 600. Sie müssen warten, bis der längste Attributwert den Zielwert erreicht. Die Entwurfsidee besteht darin, bei jeder Ausführung der Abfragefunktion einen bStob = true festzulegen Attribute in JSON, solange der Zielwert nicht erreicht ist, ist das Wertattribut auf false gesetzt, sodass der Timer nicht ausgeschaltet wird. Auch wenn einige Attributwerte den Endpunkt erreicht haben, wird die Abfrage weiterhin durchgeführt Zu diesem Zeitpunkt wird gescannt, aber zu diesem Zeitpunkt ist die Bewegungsgeschwindigkeit des Attributs 0 und es wird nicht trainiert. Das heißt, bevor:
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>erweitert wird
Das obige ist der detaillierte Inhalt vonEine ausführliche Einführung in mehrwertige Bewegungen im JavaScript-Bewegungsframework (4). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!