Heim > Artikel > Web-Frontend > JavaScript-Bewegungsframework – Beispielcode von der Kettenbewegung bis zur perfekten Bewegung (5)
JavaScript-Bewegungsframework – Beispielcode von der Kettenbewegung bis zur perfekten Bewegung (5)
- 黄舟Original
- 2017-05-21 13:25:421297Durchsuche
In diesem Artikel wird hauptsächlich der fünfte Teil des JavaScriptFrameworks vorgestellt, der von der Kettenbewegung bis zur perfekten Bewegung reicht.
Basierend auf dem Bewegungsrahmen der vorherigen Artikel erläutert dieser Artikel hauptsächlich die Kettenbewegung, die darin besteht, die Bewegung nach der Bewegung fortzusetzen. Auf vielen Websites wird beispielsweise eine Box angezeigt undbeendet : Beim Erscheinen wird es zunächst breiter und dann höher, beim Austritt wird es zunächst kürzer und dann beim Austritt schmaler! Das vorherige
Modell ist:
startMove(obj, json);
startMove(obj, json, fn);
-Funktion . Nachdem der -Timer bereinigt wurde, führen Sie fn() manuell aus und rufen Sie dann startMove in fn auf (obj, json, fn) und rufen Sie dann startMove(obj, json, fn) im fn im Inneren auf, und Sie können weiterspielen
<!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() {
startMove(op, {width:300,opacity:30}, function() {
startMove(op, {height:500});
});
};
op.onmouseout = function() {
startMove(op, {height:100}, function() {
startMove(op, {width:100,opacity:100});
})
};
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, null)[attr];
}
}
function startMove(obj, json, fn) {
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));
}
if (cur != json[attr]) {
bStop = false;
}
var speed = (json[attr] - cur)/10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
cur += speed;
if (attr === 'opacity') {
obj.style.filter = 'alpha(opacity:' + cur + ')';
obj.style.opacity = cur/100;
} else {
obj.style[attr] = cur + 'px';
}
}
if (bStop) {
clearInterval(obj.timer);
if (fn) fn();
}
}, 30);
}
</script>
</body>
</html>Der endgültige extrahierte perfekte Bewegungsrahmen lautet wie folgt: MotionFrame. js: Das obige ist der detaillierte Inhalt vonJavaScript-Bewegungsframework – Beispielcode von der Kettenbewegung bis zur perfekten Bewegung (5). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!