Heim > Artikel > Web-Frontend > JS erstellt Falt- und Entfaltungsanimationen (mit Code)
JS erstellt Falt- und Entfaltungsanimationen (mit Code)
- php中世界最好的语言Original
- 2018-05-14 14:38:142538Durchsuche
Dieses Mal bringe ich Ihnen JS mit, um eine Falt- und Entfaltungsanimation (mit Code) zu erstellen. Was sind die Vorsichtsmaßnahmen für die Erstellung einer Falt- und Entfaltungsanimation mit JS (mit Code). Praktischer Fall, schauen wir uns das einmal an.
<!DOCTYPE = html>
<html>
<head>
<title> JS折叠展开动画</title>
<style>
body{
margin: 0px;
padding: 0px;
}
.red{
background-color:red;
width:200px;
height:200px;
position:relative;
left:-200px;
top:0px;
}
.blue{
background:blue;
width:20px;
height:50px;
position:absolute;
left:200px;
top:75px;
}
</style>
</head>
<body>
<p class="red" id="cf1"><p class="blue" id="cf">分享</p></p>
<script>
window.onload = function(){
var onp = document.getElementById("cf1");
onp.onmouseover = function(){
startmove(0);
}
onp.onmouseout = function(){
startmove(-200);
}
}
var timer ;
function startmove(target){
clearInterval(timer);//清除定时器，以免多次触发定时器导致速度越来越快而不是匀速前进
var onp1 = document.getElementById("cf1");
timer = setInterval(function(){
var speed = 0;
if(onp1.offsetLeft<target){
speed = 10;
}else{
speed = -10;
}
if(onp1.offsetLeft==target){
clearInterval(timer);
}
else{
onp1.style.left = onp1.offsetLeft+speed+'px';
}
},30)
}
</script>
</body>
</html>
Zusammenfassung:
1. CSS-Teil:
1. Vergessen Sie nicht, den Stil zu initialisieren.
2. Überprüfen Sie die
absolute Positionierung (Übergeordnete Beziehungen verwenden relativ; untergeordnete Beziehungen verwenden absolut)
2. js-Teil:
1,element.style.left & element.offsetLeft Unterschied:
① Die Einheit des ersteren ist px, die Einheit des letzteren ist eine Zahl Wert;so wenig wie möglich (sofern das Ziel erreicht werden kann) 4. Am besten ist es, das Mausaktionsobjekt auf das übergeordnete p zu setzen, sonst kommt es zu Flackern (
onmouseoverwurde gerade aufgerufen, das Ziel wurde entfernt und onmouseout wurde erneut aufgerufen) 5. Achten Sie darauf, den Timer zu löschen (①, um eine instabile Geschwindigkeit beim Bewegen zu verhindern ②, stoppen Sie Bewegen an der Zielposition)
3. Andere:F: Kann Google Chrome Popup-Fenster entsperren?
A: Einstellungen – Erweiterte Einstellungen – Datenschutzeinstellungen – Inhaltseinstellungen – Popup-Fenster zum Vornehmen relevanter Einstellungen.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
vue+vue-router+vuex-BetriebsberechtigungenV-Bind- und V-On-Nutzung Ausführliche Erläuterung des FallesDas obige ist der detaillierte Inhalt vonJS erstellt Falt- und Entfaltungsanimationen (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!