Répéter certaines roues sélectivement peut ne pas être une mauvaise chose. Le blog d'Aaron a ajouté un menu suspendu, qui semble très grand. Bien que ce genre de truc ne soit pas la première fois que je l'ai vu, je ne l'ai jamais écrit moi-même. Aujourd'hui, j'écrirai de manière sélective sur cette fonction. Ce qui suit est le processus de développement de cette roue, qui peut également être considéré comme un processus d'analyse et de mise en œuvre d'un document d'exigence.
Adresse de démonstration: http://sandbox.runjs.cn/show/to8wdmuy
Téléchargement du code source: https://github.com/bjtqti/floatmenu
La première étape consiste à créer une structure de section DOM:
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> AppCarrier </Title>
<link rel = "Stylesheet" href = "menu.css">
</ head>
<body>
<div id = "contenu">
<h1 id = "test1"> test1 </h1>
<p> Le passé peut faire mal. Mais vous pouvez en courir ou en apprendre </p>
<p> Le passé était douloureux, mais vous vous en échappez ou en grandissez </p>
<p> On rencontre son destin sur la route qu'il prend pour l'éviter </p>
<p> C'est souvent sur le chemin d'échapper au destin, mais il rencontre de façon inattendue </p>
<p> Les règles sont censées être enfreintes </p>
<p> Les règles doivent être enfreintes. </p>
<p> Des années peuvent se fragmenter la peau, mais pour abandonner l'enthousiasme ride l'âme. </p>
<p> Le temps qui passe ne fait que le visage vieux, mais la passion ne fait plus le cœur. </p>
<h1 id = "test2"> test2 </h1>
<p> Seulement en pratiquant constamment les connaissances que vous avez apprises, pouvez-vous vraiment la maîtriser. </p>
<p> Vivez tous les jours au maximum. </p>
<p> Profitez tous les jours. </p>
<p> Gardez les yeux sur les étoiles et vos pieds au sol. </p>
<p> ont des ambitions élevées et gardez vos pieds sur le sol. </p>
<p> Soyez toujours debout pour une aventure inattendue. </p>
<p> Allez-y à tout moment pour commencer une aventure inattendue. </p>
<p> La vie est pleine de déception. Vous ne pouvez pas vous attarder sur les choses. Vous devez passer à autre chose. </p>
<p> La vie est souvent malheureuse, ne vous adonnez pas au passé et avancez courageusement. </p>
<p> Je suis un esprit libre. Je ne peux pas être mis en cage. </p>
<p> Mon âme est libre et ne devrait pas être liée. </p>
<p> Parfois, le cœur voit ce qui est invisible à l'œil. </p>
<p> Ceux qui sont hors de vue peuvent le sentir </p>
<p> Les choses simples sont aussi les choses les plus extraordinaires, et seuls les sages peuvent les voir. </p>
<p> La chose la plus ordinaire est aussi la chose la plus extraordinaire, et seuls les sages le comprennent. </p>
<h1 id = "test3"> test3 </h1>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<h1 id = "test4"> test4 </h1>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
<p> Combien de xxxxxx </p>
</div>
<div id = "menubar">
<p> Hide </p>
<ul>
<li> <a href = "# test1"> test1 </a> </li>
<li> <a href = "# test2"> test2 </a> </li>
<li> <a href = "# test3"> test3 </a> </li>
<li> <a href = "# test4"> test4 </a> </li>
</ul>
</div>
</docy>
<script src = "menu.js"> </ script>
</html>
La deuxième étape consiste à préparer le fichier CSS:
La copie de code est la suivante:
ul {
Type de style liste: aucun;
}
un {
Décoration du texte: aucune;
}
/ * Zone de contenu de l'article * /
#contenu {
Largeur: 400px;
marge: 0 auto;
taille de police: 2em;
}
/ * Menu flottant * /
.menu {
Position: fixe;
TOP: 20%;
à droite: 0;
Largeur: 200px;
Border: 1px gris massif;
Border-Radius: 5px;
}
.Menu li {
hauteur: 2em;
hauteur de ligne: 2em;
}
.rouge {
Couleur: rouge;
}
.cacher {
Affichage: aucun;
}
/ * Masquer le menu flottant * /
.slidein {
Transform: tradlate3d (202px, 0, 0);
Durée de transition: 0,5s;
}
/ * Afficher le menu flottant * /
.slideout {
Transform: tradlate3d (0, 0, 0);
Durée de transition: 0,5s;
}
.Static {
Couleur: # 007Aff;
Texte-aligne: Centre;
}
/ * Montre la balle flottante * /
.Toshow {
Affichage: bloc;
Largeur: 4.8EM;
hauteur: 2em;
hauteur de ligne: 2em;
Border-Radius: .5em;
Border: 1px gris massif;
Transform: tradlate3d (-5em, 0, 0);
Durée de transition: 1s;
}
La troisième étape commence à écrire le code JS:
La copie de code est la suivante:
(fonction (doc) {
// Collecte les emplacements des liens pour chaque chapitre
var pos = [],
// Collection d'articles sur le menu
links = doc.getElementsByTagName ('a'),
// collectionner le titre du chapitre
titres = doc.getElementsByTagName ('H1'),
// menu suspendu
menu = doc.getElementByid («menubar»),
// Sélection actuelle
currentItem = null;
// Ajouter un style rouge
var addClass = fonction (élément) {
currentItem && currentItem.RemoveAtTribute («classe»);
element.setAttribute ('class', 'red');
currentItem = élément;
},
// La page Web est déployée haut:
getScrollTop = function () {
return math.ceil (document.body.scrolltop) +1;
},
// Calculez la position de défilement
startCroll = function () {
var scrolltop = getCrollTop (),
len = titres.length,
i = 0;
// Article 1
if (scrolltop> = 0 && scrolltop <pos [0]) {
addClass (liens [0]);
retour;
}
// le dernier
if (scrolltop> = pos [Len-1]) {
addClass (liens [LEN-1]);
retour;
}
//milieu
pour (; i <len; i ++) {
if (scrolltop> pos [i] && scrolltop <pos [i + 1]) {
addClass (liens [i]);
casser;
}
}
};
// Cliquez sur le lien dans la liste pour modifier la couleur
menu.onclick = fonction (e) {
var cible = e.target || e.srcelement;
if (target.nodename.tolowercase () === 'a') {
// indique l'indication de l'état de l'élément
addClass (cible);
retour;
}
if (target.nodename.tolowercase () === 'p') {
if (target.classname == 'static') {
// Masquer le menu
this.className = 'menu Slidein';
setTimeout (function () {
Target.ClassName = 'Static Toshow';
cible.innerhtml = 'show';
}, 1000);
}autre{
// Afficher le menu
Target.className = 'statique';
Target.innerHtml = 'Hide';
this.className = 'Menu Slideout';
}
}
}
// Calculez la position initiale de chaque chapitre
var ln = titres.length;
while (- ln> -1) {
//titles ° Len.
pos.unshift (titres [ln] .offsetTop);
}
StartCroll ();
//Rouleau
window.onscroll = function () {
StartCroll ()
}
})(document);
analyser:
1. Implémentez le saut automatique à la section spécifiée
Cette étape peut être effectuée en utilisant la fonction d'ancrage de la balise <a>. Étant donné que HTML5 ne prend pas en charge l'attribut de nom à l'avenir (HTML5 ne le prend pas en charge. Spécifiez le nom de l'ancre.), Envisagez d'utiliser l'ID pour sauter.
2. Identifier quel chapitre dans le contenu de gauche appartient à l'élément dans le menu flottant.
Cette étape est un point difficile, analysons-le brièvement:
2.1 Le premier cas consiste à cliquer sur l'élément de menu manuellement. C'est facile, identifiez simplement l'élément cliqué.
2.2 Dans le deuxième cas, faites défiler ou faites glisser la barre de défilement à travers le bouton de la souris du milieu. À l'heure actuelle, vous devez associer le contenu à gauche et les éléments de menu à droite. C'est la partie la plus difficile. Considérez la stratégie de mise en œuvre étape par étape, en commençant par la facile et difficile, et chacune percède.
2.2.1 Collectez d'abord la hauteur des coordonnées de l'élément de titre. C'est la hauteur verticale de toutes les balises H1. Enregistrer le tableau 1.
2.2.2 Collectez l'élément A dans l'élément de menu et stockez-le dans le tableau 2.
2.2.3 Écoutez l'événement de défilement et déterminez à quel élément de menu le contenu actuel appartient.
Lorsque vous faites un pas, il est recommandé de dessiner une image sur le papier manuscrit:
A1
******************
* A2
*
******************
* A3
*
******************
*
* A4
*
Chaque fois que vous faites défiler, vous déterminerez quelle plage est la distance de défilement actuelle. S'il est de 0 à A1, c'est le chapitre 1, A1 à A2, c'est le chapitre 2, et ainsi de suite.
En ce qui concerne la hauteur de position de l'élément, j'utilise simplement l'élément.offsetTop pour l'obtenir ici. Il peut y avoir des problèmes de compatibilité. Si vous utilisez jQuery, ce devrait être $ ('élément'). Offset (). Top,
De même, j'ai simplement utilisé document.body.scrolltop pour obtenir la hauteur de la barre de défilement. S'il est remplacé par jQuery, il devrait être $ (fenêtre) .scrollTop ();
Le but du dessin est de concrétiser les problèmes abstraits, de nous aider à réfléchir et à découvrir les règles. Peut-être que cela semblera plus grand en l'appelant "modélisation".
Il convient de souligner que les relations dans le tableau 1 et le tableau 2 doivent correspondre une par une. Par exemple, le <a Href = "# H1"> correspondant est <h1 id = "h1">.
2.3 Dans le troisième cas, l'indicateur d'état du menu lorsque vous entrez directement la page. Par exemple, si vous entrez via une adresse comme index.html # H3, le H3 dans le menu doit être mis en surbrillance.
3. Implémentez l'animation d'affichage et de masque du menu flottant.
3.1 Cette étape devrait être relativement simple, vous pouvez envisager de le faire en premier. Utilisez simplement la propriété TramSform de CSS3. C'est simple et efficace. Si vous croisez, veuillez être compatible.
Remarque que la transformation: tradlate3d (axe x, axe y, axe z); L'utilisation de 3D peut utiliser l'accélération matérielle pour augmenter les effets d'animation, mais la consommation d'énergie augmentera, alors faites-en bon usage! Le premier paramètre consiste à contrôler les directions gauche et droite. S'il est positif, cela signifie se déplacer vers la droite, et s'il est négatif, cela signifie se déplacer vers la gauche. Ce n'est en fait pas rigoureux. En fait, il doit être déterminé sur la base du point de référence. Par exemple, lorsque la coordonnée x d'un élément est 0, alors la valeur de x est augmentée à droite et réduite vers la gauche, et 0 est réinitialisée.
Après l'analyse, le code est écrit. Il n'y a rien à dire à ce sujet. Profitez du sentiment musical généré en tapant le clavier.
Après avoir écrit, prévisualisez-le, cliquez sur le menu, sautez vers le chapitre spécifié et cliquez sur l'élément pour devenir rouge, actualisez la page actuelle et l'affichage de dépendance est correct. Faites glisser la roue de défilement et les éléments de menu changent en conséquence avec les modifications de contenu. Faites glisser la barre de défilement. La même chose est vraie. Enfin, cliquez pour masquer, rétractez le menu, cliquez pour afficher et le menu glisse. Cela complètera la fonction de suspension.
Ce qui précède est tout sur cet article, j'espère que vous l'aimez.