Dieser Artikel stellt hauptsächlich den dritten Teil des JavaScriptMotionFrameworks im Detail vor, die Bewegung mit beliebigem Wert für mehrere Objekte, die für Interessierte einen gewissen Referenzwert hat bis
In den beiden vorherigen Artikeln geht es um die Bewegung eines einzelnen Objekts. In diesem Artikel geht es zunächst um die Bewegung mehrerer Objekte, beispielsweise um die verschiedenen Attribute mehrerer ps wie Breite, Höhe, Schriftgröße, Pufferbewegungsänderungen für Transparenz.
Ab diesem Artikel werden offsetWdith, offsetHeight usw. nicht mehr verwendet, da Probleme auftreten, z. B. das Hinzufügen eines Rahmens, offsetWidth verursacht schwerwiegende Probleme, siehe den „Fehler“ von offsetWidth in JavaScript Mein persönlicher Blog Die Gegenmaßnahme und Lösung besteht darin, die Funktion getStyle(obj, attr) zu kapseln und damit den aktuellen Wert in Bewegung zu erhalten!
function getStyle(obj, name) {
if(obj.currentStyle) {//IE
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
}Da sich jedes Objekt unabhängig bewegt, können einige Variablen nicht zwischen ihnen geteilt werden, wie z. B. Timer, jedes ObjektJeder Timer sollte dies tun Es gibt einen eigenen Timer, denn jedes Mal, wenn der Timer gestartet wird, muss der vorherige Timer gelöscht werden. Das heißt, wenn sich das erste Objekt noch bewegt, bewegen Sie einfach die Maus zum zweiten Objekt und löschen Sie es sofort des ersten Objekts, das angehalten wird, wenn es den Zielwert nicht erreichen kann
Darüber hinaus gibt es grundsätzlich zwei Arten von Objektbewegungsstilen: eine ist die Größe, die in px-Eigenschaften angegeben ist, und eine andere Kategorie ist Transparenz!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>运动框架(三)：多物体运动</title>
<style type="text/css">
p {
width: 100px;
height: 100px;
background: yellow;
margin: 10px;
float: left;
filter: alpha(opacity:100);
opacity: 1;
}
</style>
</head>
<body>
<p id="p1">变高</p>
<p id="p2">变宽</p>
<p id="p3">fontSize Changed</p>
<p id="p4">alpha</p>
<script type="text/javascript">
var doc = document;
var op1 = doc.getElementById('p1');
op1.onmouseover = function() {
startMove(this, 'height', 300);
};
op1.onmouseout = function() {
startMove(this, 'height', 100);
};
var op2 = doc.getElementById('p2');
op2.onmouseover = function() {
startMove(this, 'width', 300);
};
op2.onmouseout = function() {
startMove(this, 'width', 100);
};
var op3 = doc.getElementById('p3');
op3.onmouseover = function() {
startMove(this, 'fontSize', 30);
};
op3.onmouseout = function() {
startMove(this, 'fontSize', 16);
};
var op4 = doc.getElementById('p4');
op4.onmouseover = function() {
startMove(this, 'opacity', 30);
};
op4.onmouseout = function() {
startMove(this, 'opacity', 100);
};
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, null)[attr];
}
}
function startMove(obj, attr, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var cur = 0;
if (attr === 'opacity') {
cur = parseFloat(getStyle(obj, attr)) * 100;
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget - cur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (iTarget == cur) {
clearInterval(obj.timer);
} else {
if (attr === 'opacity') {
cur += speed;
obj.style.filter = 'alpha(opacity:' + cur + ')';
obj.style.opacity = cur / 100;//FireFox && Chrome
} else {
cur += speed;
obj.style[attr] = cur + 'px';
}
}
}, 30);
}
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonGemeinsame Nutzung von JavaScript-Motion-Framework-Beispielcode für die Bewegung beliebiger Werte mehrerer Objekte (3). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
