suchen

Heim  >  Artikel  >  Web-Frontend  >  JS implementiert einen Popup-Ebeneneffekt, dessen Größe angepasst und durch Doppelklicken geschlossen werden kann_Javascript-Fähigkeiten

JS implementiert einen Popup-Ebeneneffekt, dessen Größe angepasst und durch Doppelklicken geschlossen werden kann_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:36:291305Durchsuche

Das Beispiel in diesem Artikel beschreibt die JS-Implementierung eines Popup-Ebeneneffekts, der in der Größe angepasst und per Doppelklick geschlossen werden kann. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist eine JS-Popup-Ebene mit anpassbarer Größe. Doppelklicken Sie, um die Ebene zu schließen. Nachdem das Fenster geöffnet wurde, doppelklicken Sie darauf -up-Fenster, um die Maus zu schließen. Ich denke, es ist ein ziemlich guter Effekt und man kann viel JS-Wissen lernen.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-define-close-able-alert-dlg-demo/

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html>
<html>
<head>
<title>JS弹出层</title>
<style>
body {margin:0px}
#Loading {position:absolute;z-index:10;left:10px;top:10px;border:1px #666666 solid;background:#eeeeee;width:10px;height:10px}
</style>
<script LANGUAGE="JavaScript">
<!--
function $(){return document.getElementById&#63;document.getElementById(arguments[0]):eval(arguments[0]);}
var OverH,OverW,ChangeDesc,ChangeH=50,ChangeW=50;
function OpenDiv(_Dw,_Dh,_Desc) {
$("Loading").innerHTML="";
OverH=_Dh;OverW=_Dw;ChangeDesc=_Desc;
$("Loading").style.display='';
if(_Dw>_Dh){ChangeH=Math.ceil((_Dh-10)/((_Dw-10)/50))}else if(_Dw<_Dh){ChangeW=Math.ceil((_Dw-10)/((_Dh-10)/50))}
$("Loading").style.top=(document.documentElement.clientHeight-10)/2+"px";
$("Loading").style.left=(document.documentElement.clientWidth-10)/2+"px";
OpenNow()
}
var Nw=10,Nh=10;
function OpenNow() {
if (Nw>OverW-ChangeW)ChangeW=2;
if (Nh>OverH-ChangeH)ChangeH=2;
Nw=Nw+ChangeW;Nh=Nh+ChangeH;
if(OverW>Nw||OverH>Nh) {
if(OverW>Nw) {
$("Loading").style.width=Nw+"px";
$("Loading").style.left=(document.documentElement.clientWidth-Nw)/2+"px";
}
if(OverH>Nh) {
$("Loading").style.height=Nh+"px";
$("Loading").style.top=(document.documentElement.clientHeight-Nh)/2+"px"
}
window.setTimeout("OpenNow()",10)
}else{
Nw=10;Nh=10;ChangeH=50;ChangeW=50;
$("Loading").innerHTML=ChangeDesc;
}
}
//-->
</script>
</head>
<body>
<a href="javascript:OpenDiv(500,300,'层1<br>双击关闭')">层1 500*300</a><br><br>
<a href="javascript:OpenDiv(500,200,'层2<br>双击关闭')">层2 500*200</a><br><br>
<a href="javascript:OpenDiv(200,500,'层3<br>双击关闭')">层3 200*500</a><br><br>
<a href="javascript:OpenDiv(500,500,'层4<br>双击关闭')">层4 500*500</a>
<a href="javascript:OpenDiv(500,500,'层5<br>双击关闭')">层5 500*500</a>
<div id="Loading" style="display:none" ondblclick="this.style.display='none'"></div>
</body>
</html>

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.

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 einer Methode zum Generieren von Zufallszahlen in js_javascript-KenntnissenNächster Artikel：Beispiel einer Methode zum Generieren von Zufallszahlen in js_javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen