Idées et code d'implémentation pour les boîtes pop-up sur le côté des pages Web produites par les compétences javascript_javascript

C'est le week-end, il est temps de résumer demain. Je sens que j'ai appris quelque chose, mais je sens que je n'ai pas beaucoup appris demain. Tout d'abord, regardons les problèmes à analyser aujourd'hui.

Tout le monde connaît les images comme celle-ci :

————————————

Aujourd'hui, nous allons l'analyser et le réaliser. Commençons par présenter les caractéristiques de cette boîte pop-up :

* Toujours attachée à la bordure de la page

* Ne change pas de position au fur et à mesure que la page monte et tombe

* Lorsque la souris passe dessus, des informations détaillées apparaîtront. En partant, l'état d'origine sera restauré

De cette façon, on peut penser grossièrement à plusieurs fonctions qui peuvent être utilisées. : positionnement absolu de la position ; départ après le passage de la souris. Surveillance et méthodes ; celles-ci seront certainement utilisées, mais à part celles-ci, qu'est-ce qui est utilisé et comment sont-ils mis en œuvre ?

1. Pour connaître l'état de l'interface de tous les écrans

Écrivez d'abord le code HTML

Copiez le code Le code est le suivant :

🎜>

Conseils

div>

Partager avec

/span>


Puis encodage de style CSS

Copiez le code Le code est le suivant : *{margin : 0;padding : 0;}

#shareLeft{position : fixe ; couleur de fond : jaune ; haut : 50 px ; largeur : 300 px ; hauteur : 600 px ; droite : 0 px ;}

#mainMsg{color : #fff ;position : absolue ;curseur : pointeur ;alignement du texte : centre ;couleur d'arrière-plan : rouge ;haut : 60px;largeur: 100px;hauteur: 400px;remplissage: 20px 0 0 10px;marge gauche: -100px;border-radius:50px 0 0 50px }
.list{float: right;background-color: #fff; ;largeur : 280px;hauteur : 580px ;marge : 10px 10px 10px 10px;}


Analysons ici les points clés : a. ; b. à droite : 0px, c'est spécifique L'application sera expliquée en détail plus tard, mais c'est aussi très important 3. La marge gauche de #mainMsg : -100px, cet endroit est également très important, alors prenons un regardez l'effet

Haha, c'est le plus gros de cette année Faisons une blague sur la boîte pop-up Continuons à parler de js pour obtenir l'effet pop-up
<.> 2. Cachez la partie détaillée et divulguez la partie invite
C'est relativement simple pour le modifier, il suffit d'ajouter Changez simplement la bonne valeur de shareLeft, right=-300px, qui est la largeur du div.

3. Utilisez js pour obtenir l'effet pop-up

Ce n'est pas la première fois que nous utilisons cet effet de minuterie, nous l'avons déjà utilisé lorsque nous avons implémenté l'effet machine à écrire dans js. Ici nous venons de changer l'objet timing




Copier le code

Le code est le suivant : < span style="font-size:12px;"> 🎜>

Les points les plus importants à noter dans ce code sont : offsetWidth, .style.right, etc. Je n'entrerai pas encore dans les détails à ce sujet, là je le présenterai dans un article spécial. Utilisons-le comme ceci ici. Connaissez simplement le sens.

J'en parlerai après l'avoir compris. Maintenant que l'effet est obtenu, vous pouvez l'essayer aussi.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Apprenez Nodejs avec moi (1) --- Introduction à Node.js et installation des compétences d'environnement de développement_javascriptArticle suivant：Apprenez Nodejs avec moi (1) --- Introduction à Node.js et installation des compétences d'environnement de développement_javascript

Articles Liés

Voir plus

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript