Heim > Artikel > Web-Frontend > Einführung in das JS Chain Motion Framework und Beispiele (Code)
Einführung in das JS Chain Motion Framework und Beispiele (Code)
- 不言Original
- 2018-09-01 11:47:311283Durchsuche
Der Inhalt dieses Artikels ist eine Einführung (Code) zum js-Chain-Motion-Framework. Er hat einen gewissen Referenzwert. Ich hoffe, er wird für Sie hilfreich sein.
Die zuvor eingeführten Bewegungen sind alle abgeschlossen, nachdem sich ein Objekt bewegt hat, es gibt andere Vorgänge, wie zum Beispiel ein p, das zuerst breiter, dann höher und schließlich transparenter wird Der Bewegungsrahmen erfüllt die Situation nicht. Wir können eine fnEnd-Funktion basierend auf dem Bewegungsframework hinzufügen, um Operationen auszuführen, nachdem die Bewegung abgeschlossen ist.
Kettenbewegungsrahmen
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}
else{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj, attr, iTarget, fnEnd) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var cur=0;
if(attr==="opacity"){
cur=Math.round(parseFloat(getStyle(obj,attr))*100);//有可能会出现误差0.07*100
}
else{
cur=parseInt(getStyle(obj,attr));
}
var speed = (iTarget - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur === iTarget) {
clearInterval(obj.timer);
if(fnEnd)fnEnd();//运动结束后，如果fnEnd参数传递进去了就执行fnEnd函数
} else {
if(attr==="opacity"){
obj.style.filter="alpha(opacity:"+cur+speed+")";
obj.style.opacity=(cur+speed)/100;
}else{
obj.style[attr]=cur+speed+"px";
}
}
}, 30)
}
Kettenbewegungsbeispiel
Wir verwenden den obigen Kettenbewegungsrahmen, um ein P zu erstellen, das sich zuerst bewegt, um die Breite anzupassen, und sich dann bewegt, um die Höhe anzupassen. und schließlich bewegt sich „Transparenz anpassen“.
<!DOCTYPE html>
<html>
<head>
<title>链式运动</title>
<script src="move2.js"></script>
<style>
#p1{
width: 100px;
height: 100px;
background: red;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script>
window.onload=function(){
var op=document.getElementById("p1");
op.onmouseover=function(){
startMove(op,"width",300,function(){
startMove(op,"height",300,function(){
startMove(op,"opacity",100);
})
})
}
op.onmouseout=function(){
startMove(op,"opacity",30,function(){
startMove(op,"height",100,function(){
startMove(op,"width",100);
})
});
}
}
</script>
</head>
<body>
<p id="p1"></p>
</body>
</html>
Verwandte Empfehlungen:
JavaScript Motion Framework Chain Motion to Perfect Motion Beispielcode (5)
Javascript Support Chain Async.Operation_javascript Tipps für das Framework für asynchrone Aufrufe
Das obige ist der detaillierte Inhalt vonEinführung in das JS Chain Motion Framework und Beispiele (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!