Beispielcode-Sharing des Javascript-Motion-Frameworks

Fügen Sie dem Div einen Rahmen hinzu, Rahmen: 1 Pixel einfarbig schwarz

window.onload = function(){
var div = document.getElementById('div1');

div.onclick = function(){
div.onclick setInterval(function(){
div.style.width = div.offsetWidth-1+'px'
},30)
      }
}

Wenn wir mit dem Code experimentieren, können wir feststellen, dass die Breite ständig abnehmen sollte, aber was? Im Gegenteil, es hat zugenommen. Warum ist das so?

Es stellt sich heraus, dass es diese Probleme mit den Offset-Serienattributen gibt. Korrigieren wir sie unten

1. currentStyle ist der aktuelle Stil, aber er ist nicht mit Google und Firefox kompatibel

2. getComputedStyle ist der berechnete Stil und nicht kompatibel mit ie8--

Der spezifische Code lautet wie folgt:

Der übergebene Parameter obj bezieht sich auf das erhaltene Objekt und der Name lautet das Stilattribut

function getStyle(obj,name){
                                                                                                                       using   with       }else{
                                                                                                                                             🎜>Down Im nächsten Schritt müssen wir die Verschiebefunktion weiterentwickeln

Wir müssen den Startabstand von var start = obj.offsetLeft; in var start = parseFloat(getStyle(obj,name)); ändern.

Da getStyle(obj,name) eine Zeichenfolge erhält, benötigen Sie um parseFloat zum Konvertieren des Typs zu verwenden

Der spezifische Code lautet wie folgt

Auch vor dem Ein- und Ausblenden gelernt, können wir dies mit Transparenz tun, also Wie geht das?

Zunächst müssen Sie feststellen, ob ein Deckkraftattribut vorhanden ist. Wenn ja, müssen Sie Transparenz * 100 verwenden, da Transparenz eine Dezimalzahl ist. Andernfalls verwenden Sie weiterhin die Standardeinstellung.

if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';

}else{

obj.style[name] = cur +'px';

}

Der obige Code kann sich nur in eine Richtung bewegen, aber ich möchte zuerst 500 nach unten gehen , und dann nach links gehen 100, was machen Sie?

Ich habe bereits etwas über Rückruffunktionen gelernt, wenn ich ihm eine Rückruffunktion übergebe, ist das in Ordnung?

Stellen Sie bei der Fahrt zum Ziel fest, ob eine Rückruffunktion vorhanden ist. Wenn ja, wird es ausgeführt, andernfalls wird es nicht ausgeführt.

Der spezifische Code lautet wie folgt

window.onload = function(){

var oDiv = document.getElementById('div1');

var timer;

function getStyle( obj,name){

//currentStyle: aktueller Stil

if(obj.currentStyle){

return obj.currentStyle[name];//Nicht kompatibel mit Google und Firefox

} else{

//getComputedStyle: berechneter Stil
return getComputedStyle(obj,false)[name];//Nicht kompatibel mit IE8--
}
}
function move(obj,name ,target ,dur,fn){
var count = parseInt(dur/30);//Gesamtzeiten
var start = parseFloat(getStyle(obj,name));//Startdistanz
var dis = Ziel - Start;//Distanz
// Schrittlänge
// var step =dis/count;
var n = 0;//Aktuelle Anzahl der Schritte

timer = setInterval (function (){
n++;
var cur = start + n*dis/count;
if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}
obj.style[name] = cur +'px';
if(n == count ){
clearInterval(timer)
fn && fn();
}

},30)
}

oDiv.onclick = function(){

move(oDiv,'top',500,3000,function(){
move(oDiv,'left',100,500);
})
}
}

待绝....

Das obige ist der detaillierte Inhalt vonBeispielcode-Sharing des Javascript-Motion-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!