Implémenter un effet de boîte contextuelle basé sur les compétences JavaScript

Implémenter un effet de boîte contextuelle basé sur les compétences JavaScript_javascript

WBOY

Libérer： 2016-05-16 15:14:47

original

1973 Les gens l'ont consulté

Les boîtes pop-up sont un élément indispensable des pages d'un site Web. Aujourd'hui, avec l'aide de la plateforme Script House, je vais partager avec vous comment utiliser js pour obtenir un simple effet de boîte pop-up. écrit, alors s'il te plaît, pardonne-moi !

Tout d'abord, analysons les composants de la boîte contextuelle. Une simple boîte contextuelle est divisée en tête, contenu et queue. La tête a un titre et un bouton de fermeture, le contenu peut être des graphiques, des médias, iframe, flash, etc., et la queue est le bouton (Confirmer, annuler, etc.), je n'ajouterai pas de boutons à la fin de cet exemple. Cet exemple implémente principalement la partie principale de la boîte contextuelle

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body, div{
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
}
.pop {
border-radius: 5px;
background-color: #fff;
border: #eee 1px solid;
position: absolute;
width: 350px;
left: 35%;
top: 25%;
}
.pop-title {
background-image: linear-gradient(#eee,#efefef);
position: relative;
cursor: pointer;
}
.pop-title h3,.pop-title a{
display: inline-block;
}
.pop-title h3{
font-size: 14px;
margin: 0;
padding: 5px;
}
.pop-title a {
position: absolute;
top: 5px;
right: 5px;
}
.pop-content {
padding: 10px;
}
</style>
</head>
<body>
<div>
<div>
<h3>消息</h3>
<a href="javascript:;">X</a>
</div>
<div>
弹出框已显示
</div>
<div></div>
</div>
</body>
</html>

Copier après la connexion

Une boîte contextuelle activera le mode mouvement lorsque la tête est enfoncée et interdira le mouvement lorsque la tête est relâchée. En fait, c'est ce que cela signifie. Bien sûr, la logique est relativement simple.

Ici, nous pouvons penser à plusieurs variables, les coordonnées X et Y du mouvement, le changement et l'interdiction de mouvement. Ensuite, nous ajoutons les événements onmousedown et onmouseup au titre.

L'événement onmousedown démarre principalement le mouvement.

La logique de l'événement onmouseup est principalement de fermer le mouvement et de désactiver le mouvement de la boîte contextuelle.

Ensuite, nous devons bouger, et lorsque nous avons besoin de bouger, nous devons nous déplacer dans une certaine plage. Ici, nous nous déplaçons à l'intérieur du corps. Nous ajoutons donc l'événement onmousemove au corps. position de la boîte pop-up.

Ces trois événements combinent principalement l'attribut position en CSS et les coordonnées des attributs dans l'événement Event en JS.

var pop = document.getElementsByClassName("pop")[0];
var pop_title = pop.getElementsByClassName("pop-title")[0];
var bd = document.body;
var x = 0;
var y = 0;
var ismove = false; // 是否开启移动
var downx = 30;
var downy = 30;
pop_title.onmousedown = function (e) {
x = e.pageX;
y = e.pageY;
downx = e.offsetX;
downy = e.offsetY;
ismove = true;
}
bd.onmousemove = function (e) {
if (ismove) {
var cx = e.pageX - downx;
var cy = e.pageY - downy;
pop.style.left = cx + "px";
pop.style.top = cy + "px";
x = e.x;
y = e.y;
}
e.preventDefault();
}
pop_title.onmouseup = function (e) {
x = e.pageX;
y = e.pageY;
ismove = false;
console.log("移动完成")
}

Copier après la connexion

Après avoir déplacé la boîte contextuelle, nous ajoutons un événement de fermeture au bouton de fermeture.

//关闭 
var pop_close = pop.getElementsByClassName("pop-close")[0];
pop_close.onclick = function () {
pop.parentNode.removeChild(pop);
}

Copier après la connexion

D'accord, une simple boîte contextuelle est implémentée. Le même code peut être optimisé et encapsulé par lui-même, et d'autres fonctions peuvent être ajoutées. Les problèmes de compatibilité peuvent devoir être résolus par vous-même (versions antérieures à IE9). >

C'est tout pour introduire l'effet de boîte pop-up en utilisant js. J'espère que cela vous sera utile !

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Implémenter un effet de boîte contextuelle basé sur les compétences JavaScript_javascript