Maison > Article > interface Web > Implémenter un effet de boîte contextuelle basé sur les compétences JavaScript_javascript

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

WBOYoriginal: 2016-05-16 15:14:472032parcourir

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>

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("移动完成")
}

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);
}

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 !

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：Exemple d'effet de dégradé de couleurs de survol de texte implémenté par jQuery_jqueryArticle suivant：Exemple d'effet de dégradé de couleurs de survol de texte implémenté par jQuery_jquery

Articles Liés

Voir plus