Cette fois, je vais vous proposer un exercice approfondi de JS en utilisant JavaScript Quelles sont les précautions pour utiliser JS en JavaScript Voici des cas pratiques. .
Bases du mouvement JS
Cadre de mouvement
Lors du démarrage d'un mouvement, fermez la minuterie existante
Séparez le mouvement et arrêtez (si/sinon)
1. Mouvement uniforme
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | nbsp;HTML>
<meta>
<title>01-运动基础</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute; top:50px; left:0px;} </style>
<script>
var timer=null; function startMove() { var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval( function (){ var speed=1; if (oDiv.offsetLeft>=300)
{
clearInterval(timer);
} else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
}, 30);
} </script><input><div></div>
|
Copier après la connexion
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE HTML><html><head><meta charset= "utf-8" ><title>无标题文档</title><style>#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}#div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}</style><script>window.onload= function (){ var oDiv=document.getElementById('div1');
oDiv.onmouseover= function () {
startMove(0);
};
oDiv.onmouseout= function () {
startMove(-150);
};
}; var timer=null; function startMove(iTarget){ var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval( function (){
var speed=0;
if (oDiv.offsetLeft>iTarget)
{
speed=-10;
} else
{
speed=10;
}
if (oDiv.offsetLeft==iTarget)
{
clearInterval(timer);
} else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
}, 30);
}</script></head><body><div id= "div1" >
<span>分享到</span></div></body></html>
|
Copier après la connexion
3. 🎜>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html><html lang= "en" ><head>
<meta charset= "UTF-8" >
<title>03-淡入淡出</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
opacity:0.3;
filtr:alpha(opacity:30);
} </style>
<script>
window.onload = function () { var oDiv = document.getElementsByTagName('div')[0];
oDiv.onmouseover = function () {
changeAlpha(100);
};
oDiv.onmouseout = function () {
changeAlpha(30);
}; var timer = null; var alpha = 30; function changeAlpha(isTarget) {
clearInterval(timer); var speed = 0;
timer = setInterval( function () {
if (alpha < isTarget){
speed = 10;
} else {
speed = -10;
} if (alpha == isTarget){
clearInterval(timer);
} else {
alpha += speed;
oDiv.style.opacity = alpha/100;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
}
},30);
}
} </script></head><body><div></div></body></html>
|
Copier après la connexion
3. Le mouvement tampon
ralentit progressivement et finit par s'arrêter
Plus la distance est grande, plus la vitesse est grande
La vitesse est déterminé par la distance
Vitesse = (valeur cible - valeur actuelle) / facteur d'échelle
Exemple : menu tampon
Bug : arrondi de vitesse, les décimales le seront causer des problèmes !!!
1 | Math. ceil ():向上取整 Math. ceil (3.41) 结果是4 ,Math. ceil (-9.8) 结果是 -9; Math. floor ():向下取整 Math. floor (-0.9) 结果是 -1;
|
Copier après la connexion
1 | <html><head> <meta charset= "utf-8" > <title>无标题文档</title> <style> *{ padding: 0; margin: 0; } #div1 {width:100px; height:100px; background:red; position:absolute; left:0; top:50px;} #div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;} </style> <script> function startMove() { var oDiv=document.getElementById('div1'); setInterval( function (){ var speed=(300-oDiv.offsetLeft)/10;
|
Copier après la connexion
Buffering Movement 1 (il y a des problèmes de compatibilité sur le navigateur Chrome)
Barre latérale de mise en mémoire tampon qui suit le défilement des pages
Problème potentiel : lorsque la valeur cible n'est pas un entier, une gigue se produira. Il suffit de la convertir en un entier ! Il peut y avoir une erreur de 0,5 pixels, qui peut être ignorée ! boîte flottante à droite
Comprenez d'abord quelques connaissances de base
Obtenez la distance de défilement de la barre de défilement du navigateur
Lors de la conception d'une page, la position du calque fixe peut souvent être. utilisé, ce qui nécessite d'obtenir les coordonnées de certains objets HTML. Pour définir les coordonnées du calque cible de manière plus flexible, des attributs tels que document.body.scrollTop peuvent être utilisés ici, mais cet attribut n'est pas utilisé dans les pages Web standard xhtml ou, plus simplement. , pages avec les balises Le résultat obtenu est 0. Si vous n'avez pas besoin de cette balise, tout est normal Alors comment obtenir les coordonnées du corps dans la page xhtml ? way - utilisez document.documentElement pour remplacer document.body. Vous pouvez écrire
comme ceci :
Obtenez la distance de défilement de la barre de défilement du navigateur
var top = document.documentElement.scrollTop || body.scrollTop;
En JavaScript, || est une bonne chose, en plus d'être utilisé dans if et d'autres
jugements conditionnels
peuvent également être utilisés pour l'affectation de variables. Alors l’exemple ci-dessus est équivalent à l’exemple suivant.
Exemple : var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
Écrire comme ceci peut obtenir une bonne compatibilité.
Au contraire, si aucune déclaration n'est faite, document.documentElement.scrollTop sera affiché à 0.
Arrêter à vitesse constante
1 2 | document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度
<html><head><meta charset= "utf-8" ><title>右侧悬浮窗</title><style>#div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}</style><script>window.onscroll= function (){ var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
|
Copier après la connexion
//Valeur absolue, Math.abs()
Par exemple : (Math .abs(- Les résultats de 6)) et (Math.abs(6)) sont tous deux 6, ce qui signifie que les valeurs sont modifiées pour n'avoir aucun signe positif ou négatif, et elles sont toutes positives.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <html><head>
<meta charset= "utf-8" >
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;} #div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;} #div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;} </style>
<script>
var timer=null; function startMove(iTarget) { var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval( function (){ var speed=0; if (oDiv.offsetLeft<iTarget)
{
speed=10;
} else
{
speed=-10;
}
if (Math. abs (iTarget-oDiv.offsetLeft)<=Math. abs (speed))
{
clearInterval(timer);
oDiv.style.left=iTarget+'px';
} else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
}, 30);
} </script></head><body><input type= "button" value= "到100" onclick= "startMove(100)" /><input type= "button" value= "到300" onclick= "startMove(300)" /><div id= "div1" ></div><div id= "div2" ></div><div id= "div3" ></div></body></html>
|
Copier après la connexion
Lecture recommandée :
Application de base approfondie de JavaScript
8 connaissances de base de JS auxquelles il faut prêter attention à
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!