Dieser Artikel enthält hauptsächlich eine Beispielerklärung basierend auf einer gleichmäßigen Bewegung (Seitenleiste, Ein- und Ausblenden). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Wie bewegt man ein Element (z. B. p) in JavaScript?
Legen Sie den Grundstil fest und achten Sie darauf, das p zu positionieren (natürlich können Sie auch Randänderungen verwenden, um Bewegungseffekte für Elemente zu erzeugen);
<style>
p {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
}
</style>Nach dem Login kopieren
Grundstruktur:
<input type="button" value="动起来"/>
<p id="box"></p>
Nach dem Login kopieren
Wenn wir auf diese Schaltfläche klicken, um p zu bewegen, müssen wir tatsächlich dafür sorgen, dass sich der linke Wert von p weiter ändert. Dann hat p einen Bewegungseffekt. Wir lassen zuerst die linke Änderung zu und lassen dann zu es ändert sich weiter
window.onload = function(){
var oBtn = document.querySelector( "input" ),
oBox = document.querySelector( '#box' );
oBtn.onclick = function(){
oBox.style.left = oBox.offsetLeft + 10 + 'px';
}
}Nach dem Login kopieren
Dann wird jedes Mal, wenn ich auf die Schaltfläche klicke, der linke Wert von p um 10 Pixel zum ursprünglichen Wert addiert. Hier können Sie auch die Methode zum Erhalten des Nicht-Interline-Stils verwenden, um den Wert von left plus 10px zu erhalten, und Sie können auch den Effekt erzielen:
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
window.onload = function () {
var oBtn = document.querySelector("input"),
oBox = document.querySelector('#box');
oBtn.onclick = function () {
oBox.style.left = parseInt( css( oBox, 'left' ) ) + 10 + 'px';
}
}Nach dem Login kopieren
offsetLeft Was ist der Unterschied zwischen dem Erhalten des Werts von Nicht-Interline-Stil übrig?
offsetLeft hat keine px-Einheit, aber left hat eine px-Einheit
oBtn.onclick = function () {
// alert( css( oBox, 'left' ) ); //0px
alert( oBox.offsetLeft ); //0
}Nach dem Login kopieren
Jetzt wird p angeklickt, um es weiter zu verschieben Es? Fügen Sie einen Timer hinzu
oBtn.onclick = function () {
setInterval( function(){
oBox.style.left = oBox.offsetLeft + 10 + 'px';
}, 1000 / 16 );
}Nach dem Login kopieren
Wenn wir auf die Schaltfläche klicken, bewegt sich p weiter nach links. Wie stoppe ich es? Das Anhalten erfordert definitiv Bedingungen. Zum Beispiel bitten wir ihn, anzuhalten, wenn er 500 Pixel erreicht. Auf diese Weise können wir p bei 500 Pixel anhalten lassen. Wenn wir hier die Schrittlänge auf 10 setzen, ändern wir sie 7 oder 8, und Sie werden feststellen, dass Sie nicht aufhören können. Warum? Weil die Beurteilungsbedingung von 500px übersprungen wird
var timer = null;
oBtn.onclick = function () {
timer = setInterval( function(){
if ( oBox.offsetLeft == 500 ) {
clearInterval( timer );
}else {
oBox.style.left = oBox.offsetLeft + 10 + 'px';
}
}, 1000 / 16 );
}Nach dem Login kopieren
0, 7, 14, 21 .... 280, 287, 294, 301, ... 490, 497, 504. Sie wird von 497 bis 504 übersprungen 500px, also kann p nicht aufhören, was soll ich tun? Ändern Sie einfach die Beurteilungsbedingung.
Ändern Sie die Bedingung auf >=500, um den Timer zu löschen, und fügen Sie außerdem diesen Code oBox.style.left = 500 + 'px' hinzu, damit dies erzwungen wird Stoppen Sie bei 500 Pixel, sonst stoppt p nicht bei 500 Pixel, sondern bei 504 Pixel. Wenn Sie während der Bewegung von p weiter auf die Schaltfläche klicken, werden Sie feststellen, dass p jedes Mal zu beschleunigen beginnt ? Dies liegt daran, dass jedes Mal, wenn Sie auf eine Schaltfläche klicken, ein Timer aktiviert wird und jedes Mal, wenn Sie auf eine Schaltfläche klicken, ein Timer aktiviert wird. Auf diese Weise werden mehrere Timer überlagert und auch die Geschwindigkeit wird überlagert, sodass p beginnt zu beschleunigen, dann müssen wir eine Geschwindigkeit von 10 Pixel beibehalten, was bedeutet, dass sich der Timer nicht überschneidet. Was ist zu tun?
oBtn.onclick = function () {
timer = setInterval( function(){
if ( oBox.offsetLeft >= 500 ) {
oBox.style.left = 500 + 'px';
clearInterval( timer );
}else {
oBox.style.left = oBox.offsetLeft + 7 + 'px';
}
}, 1000 / 16 );
}Nach dem Login kopieren
Sie müssen nur den vorherigen Timer jedes Mal löschen, wenn Sie auf die Schaltfläche klicken, um sicherzustellen, dass ein Timer immer eingeschaltet ist. An diesem Punkt ist eine grundlegendste einheitliche Bewegungsstruktur abgeschlossen, dann wir kann es in eine Funktion kapseln
oBtn.onclick = function () {
clearInterval( timer );
timer = setInterval( function(){
if ( oBox.offsetLeft >= 500 ) {
oBox.style.left = 500 + 'px';
clearInterval( timer );
}else {
oBox.style.left = oBox.offsetLeft + 7 + 'px';
}
}, 1000 / 16 );
}Nach dem Login kopieren
Nachdem wir diese Funktion haben, erstellen wir eine kleine Anwendung.
function animate(obj, target, speed) {
clearInterval(timer);
timer = setInterval(function () {
if (obj.offsetLeft == target) {
clearInterval(timer);
} else {
obj.style.left = obj.offsetLeft + speed + 'px';
}
}, 30);
}Nach dem Login kopieren
http://www.jiathis.com/getcode
Wenn Sie diese Website öffnen, werden Sie feststellen, dass es auf der rechten Seite einen Seitenleisteneffekt gibt (diesen Spezialeffekt teilen). ist auf der Website im Allgemeinen sehr beliebt
Ein weiterer Fade-Effekt:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>侧边栏 - by ghostwu</title>
<style>
#box {
width: 150px;
height: 300px;
background: red;
position: absolute;
left: -150px;
top: 50px;
}
#box p {
width: 28px;
height: 100px;
position: absolute;
right: -28px;
top: 100px;
background: green;
}
</style>
<script>
window.onload = function () {
var timer = null;
var oBox = document.getElementById("box");
oBox.onmouseover = function () {
animate(this, 0, 10);
}
oBox.onmouseout = function () {
animate(this, -150, -10);
}
function animate(obj, target, speed) {
clearInterval(timer);
timer = setInterval(function () {
if (obj.offsetLeft == target) {
clearInterval(timer);
} else {
obj.style.left = obj.offsetLeft + speed + 'px';
}
}, 30);
}
}
</script>
</head>
<body>
<p id="box">
<p>分享到</p>
</p>
</body>
</html>Nach dem Login kopieren
Wenn die Maus bewegt wird Nach oben wird die Transparenz zu 1
Verwandte Empfehlungen:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出 - by ghostwu</title>
<style>
img {
border: none;
opacity: 0.3;
filter: alpha(opacity:30);
}
</style>
<script>
window.onload = function () {
var timer = null;
var oImg = document.getElementById("img");
oImg.onmouseover = function(){
animate( this, 100, 10 );
}
oImg.onmouseout = function(){
animate( this, 30, -10 );
}
//alpha=30 --> 100
function animate(obj, target, speed) {
clearInterval(timer);
var cur = 0;
timer = setInterval(function () {
cur = css( obj, 'opacity') * 100;
if( cur == target ){
clearInterval( timer );
}else {
cur += speed;
obj.style.opacity = cur / 100;
obj.style.filter = "alpha(opacity:" + cur + ")";
}
}, 30);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
}
</script>
</head>
<body>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>Nach dem Login kopieren
So verwenden Sie HTML5-Canvas, um eine gleichmäßige Bewegung zu erzielen
Verwenden Sie js, um die Schrittgröße anzugeben, um eine gleichmäßige Bewegung in eine Richtung zu erreichen
JS-Codebeispiel, um einheitliche Bewegungs_Javascript-Fähigkeiten zu erreichen
Das obige ist der detaillierte Inhalt vonBeispielerklärung basierend auf der gleichmäßigen Bewegung von js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
