De nombreux blogueurs du parc du blog ont une icône dans le coin inférieur droit de la page du blog. Peu importe comment l'écran s'étend, il reste toujours dans le coin inférieur droit. Cliquez sur la page pour en haut. Pensons à rédiger une démo pour réaliser cet effet plus tard.
1. Le coin inférieur droit de l'icône est fixé.
1. SS fournit 4 méthodes de mise en page. Fixe représente des éléments de positionnement absolu. Nous avons donc choisi d'utiliser Fixed pour obtenir une fixation des icônes.
| absolu | Génère des éléments absolument positionnés, le positionnement par rapport au premier élément parent autre que le positionnement statique. La position d'un élément est spécifiée par les attributs "gauche", "haut", "droit" et "inférieur". |
| fixé | Générez des éléments absolument positionnés, positionnant par rapport à la fenêtre du navigateur. La position d'un élément est spécifiée par les attributs "gauche", "haut", "droit" et "inférieur". |
| Relatif | Générez des éléments relativement positionnés, positionnant par rapport à leur position normale. Par conséquent, "gauche: 20" ajoute 20 pixels à la position gauche de l'élément. |
| statique | valeur par défaut. Il n'y a pas de positionnement, l'élément apparaît dans le flux normal (ignorant la déclaration supérieure, inférieure, gauche, droite ou z-index). |
| hériter | Spécifie que la valeur de l'attribut de position doit être héritée de l'élément parent. |
2. Le code est le suivant. Le bouton sera toujours placé dans le coin inférieur droit de l'écran. Qu'il s'agisse de faire glisser la barre de précision supérieure et inférieure ou d'étirer la taille de la fenêtre du navigateur.
La copie de code est la suivante:
#mytopbtn {
En bas: 5px;
À droite: 5px;
Position: fixe;
}
2. Après avoir cliqué, retournez dans le coin supérieur de la page.
1. Pour revenir dans le coin supérieur de l'écran, vous devez comprendre comment utiliser JavaScript pour faire fonctionner le mouvement de haut en bas de la barre de dragsters. JavaScript fournit des méthodes de défilement et de défilement.
La copie de code est la suivante:
window.scrollby (0, -30) // déplacez 30 pixels dans l'écran
window.scroll (0,0) // L'écran revient dans le coin supérieur
2. Ce qui précède a mentionné comment déplacer la barre de traînée, alors comment se déplacer en haut de la page à une certaine vitesse. Ensuite, vous devez utiliser les méthodes SetInterval et ClearInterval. Cela permettra à 30 pixels d'être déplacés sur l'écran en moins de 10 millisecondes.
La copie de code est la suivante:
<body>
<div id = "mydiv">
</div>
<bouton id = "mytopbtn" onclick = "topfunc ()"> to top </ftont>
</docy>
La copie de code est la suivante:
var myvar;
fonction topfunc () {
myvar = setInterval (chacun decrollby, 10);
}
Fonction EveryScrollby (EveryHeight) {
if (document.DocumentElement.ScrollTop <= 0) {
ClearInterval (MyVar);
}autre{
window.scrollby (0, -30);
}
}
Iii. Développer
Le bouton supérieur est implémenté. Alors, comment implémentons-nous le bouton cliquer sur l'écran inférieur? En fait, le principe est similaire, nous n'écrirons donc pas de démo ici. Fournissez quelques attributs pour référence.
La copie de code est la suivante:
La largeur de zone visible de la page Web: document.body.clientwidth
La hauteur de zone visible de la page Web: document.body.clientheight
La largeur de zone visible de la page Web: document.body.offsetwidth (y compris la largeur de la ligne de bord)
La hauteur de zone visible de la page Web: document.body.offsetheight (y compris la largeur de la ligne de bord)
Largeur du texte complet de la page Web: document.body.scrollwidth
Texte complet de la page Web: document.body.scrollheight
La page Web est déployée à un niveau élevé: document.body.scrolltop
La gauche de la page Web est déployée: document.body.scrollleft
Sur la partie principale de la page Web: Window.Screentop
Gauche du texte principal de la page Web: fenêtre.screenleft
Résolution à haut écran: fenêtre.Screen.Height
Largeur de la résolution d'écran: window.screen.width
Écran disponible sur l'espace de travail Hauteur: Window.Screen.AvailHeight
Écran Disponible Espace de travail Largeur: Window.Screen.AvailWidth
Ce qui précède est l'intégralité du contenu de cet article. J'espère que les chaussures des enfants qui aiment jouer des blogs comme ça.