suchen

Heim  >  Artikel  >  Web-Frontend  >  Implementieren Sie den Popup-Box-Effekt basierend auf JavaScript_Javascript-Kenntnissen

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

WBOY
WBOYOriginal
2016-05-16 15:14:472032Durchsuche

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiel eines von jQuery_jquery implementierten Text-Hover-FarbverlaufseffektsNächster Artikel：Beispiel eines von jQuery_jquery implementierten Text-Hover-Farbverlaufseffekts

In Verbindung stehende Artikel

Mehr sehen