Implementieren Sie den Popup-Box-Effekt basierend auf JavaScript_Javascript-Kenntnissen-js-Tutorial-php.cn

Implementieren Sie den Popup-Box-Effekt basierend auf JavaScript_Javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 15:14:47

Original

2062 Leute haben es durchsucht

Popup-Boxen sind ein unverzichtbarer Bestandteil von Website-Seiten. Heute werde ich Ihnen mit Hilfe der Script House-Plattform zeigen, wie Sie mit js einen einfachen Popup-Box-Effekt erzielen geschrieben, also bitte vergib mir!

Lassen Sie uns zunächst die Komponenten des Popup-Felds analysieren. Ein einfaches Popup-Feld ist in Kopf, Inhalt und Ende unterteilt. Der Kopf hat einen Titel und eine Schaltfläche zum Schließen. Der Inhalt kann aus Grafiken, Medien usw. bestehen. Iframe, Flash usw. und das Ende ist die Schaltfläche (Bestätigen, Abbrechen usw.). In diesem Beispiel wird hauptsächlich der Kernteil der Popup-Box implementiert >

<!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>

Nach dem Login kopieren

Ein Popup-Fenster aktiviert den Bewegungsmodus, wenn der Kopf gedrückt wird, und verhindert die Bewegung, wenn der Kopf losgelassen wird. Tatsächlich ist die Logik relativ einfach.

Hier können wir an mehrere Variablen denken, die X- und Y-Koordinaten der Bewegung, den Schalter und das Bewegungsverbot. Dann fügen wir dem Titel die Ereignisse onmousedown und onmouseup hinzu.

Das Onmousedown-Event startet hauptsächlich Bewegung.

Die Logik im onmouseup-Ereignis besteht hauptsächlich darin, die Bewegung zu schließen und die Bewegung des Popup-Felds zu deaktivieren.

Dann müssen wir uns bewegen, und wenn wir uns bewegen müssen, müssen wir uns innerhalb eines bestimmten Bereichs bewegen. Also fügen wir dem Körper das Ereignis „onmousemove“ hinzu Position des Popup-Fensters.

Diese drei Ereignisse kombinieren hauptsächlich das Positionsattribut in CSS und die Koordinaten der Attribute im Ereignisereignis in 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("移动完成")
}

Nach dem Login kopieren

Nachdem wir das Popup-Fenster verschoben haben, fügen wir der Schaltfläche „Schließen“ ein Schließereignis hinzu.

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

Nach dem Login kopieren

Okay, derselbe Code kann selbst optimiert und gekapselt werden, und andere Funktionen müssen möglicherweise selbst behoben werden (Versionen vor IE9). >

Das ist alles für die Einführung des Popup-Box-Effekts mit js. Ich hoffe, es wird Ihnen hilfreich sein!