Heim Web-Frontend js-Tutorial JS implementiert ziehbare und schließbare Popup-Fenstereffekte_Javascript-Fähigkeiten

JS implementiert ziehbare und schließbare Popup-Fenstereffekte_Javascript-Fähigkeiten

May 16, 2016 pm 03:37 PM
js 关闭 弹窗

Das Beispiel in diesem Artikel beschreibt die Implementierung von ziehbaren und schließbaren Popup-Fenstereffekten mithilfe von JS. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Führen Sie dieses Beispiel aus, klicken Sie auf den Text und ein Fenster wird angezeigt. Es handelt sich tatsächlich um eine Popup-Ebene, die mit der Maus gezogen werden kann Popup-Textebene und Popup-Bildebene mit dieser Methode. Bitte wählen Sie entsprechend Ihrer Wahl aus.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>弹出层、弹窗效果+拖曳功能 </title>
<style type="text/css">
 *{ margin:0px; padding:0px;}
 body{ font-size:12px; font:Arial, Helvetica, sans-serif; margin:25PX 0PX; background:#eee;}
 .botton{ color:#F00; cursor:pointer;}
 .mybody{width:600px; margin:0 auto; height:1500px; border:1px solid #ccc; padding:20px 25px; background:#fff}
 #cwxBg{ position:absolute; display:none; background:#000; width:100%; height:100%; left:0px; top:0px; z-index:1000;}
 #cwxWd{ position:absolute; display:none; border:10px solid #CCC; padding:10px;background:#FFF; z-index:1500;}
 #cwxCn{ background:#FFF; display:block;}
 .imgd{ width:400px; height:300px;}
</style>
</head>
<body>
<!--弹出窗-->
 <div class="mybody">
  <div class="botton" id="testClick">点击测试</div>
 asdasdasdasdasdasdasd<br/>这里是一段文字哦!<div class="botton" id="testClick1">点击测试</div>
 </div>
 <script type="text/javascript">
  C$('testClick').onclick = function(){
   var neirong = '<div><img src="http://www.jb51.net/images/logo.gif" class="imgd" /></div>';
   cwxbox.box.show(neirong);
  }
  C$('testClick1').onclick = function(){
   var neirong = '123456789132456789';
   cwxbox.box.show(neirong,3);
  }
  function C$(id){return document.getElementById(id);}
  //定义窗体对象
  var cwxbox = {};
  cwxbox.box = function(){
   var bg,wd,cn,ow,oh,o = true,time = null;
   return {
    show:function(c,t,w,h){
     if(o){
      bg = document.createElement('div'); bg.id = 'cwxBg'; 
      wd = document.createElement('div'); wd.id = 'cwxWd';
      cn = document.createElement('div'); cn.id = 'cwxCn';
      document.body.appendChild(bg);
      document.body.appendChild(wd);
      wd.appendChild(cn);
      bg.onclick = cwxbox.box.hide;
      window.onresize = this.init;
      window.onscroll = this.scrolls;
      o = false;
     }
     if(w && h){
      var inhtml = '<iframe src="'+ c +'" width="'+ w +'" height="'+ h +'" frameborder="0"></iframe>';
     }else{
      var inhtml  = c;
     }
     cn.innerHTML = inhtml;
     oh = this.getCss(wd,'offsetHeight');
     ow = this.getCss(wd,'offsetWidth');
     this.init();
     this.alpha(bg,50,1);
     this.drag(wd);
     if(t){
      time = setTimeout(function(){cwxbox.box.hide()},t*1000);
     }
    },
    hide:function(){
     cwxbox.box.alpha(wd,0,-1);
     clearTimeout(time);
    },
    init:function(){
     bg.style.height = cwxbox.page.total(1)+'px';
     bg.style.width = '';
     bg.style.width = cwxbox.page.total(0)+'px';
     var h = (cwxbox.page.height() - oh) /2;
     wd.style.top=(h+cwxbox.page.top())+'px';
     wd.style.left=(cwxbox.page.width() - ow)/2+'px';
    },
    scrolls:function(){
     var h = (cwxbox.page.height() - oh) /2;
     wd.style.top=(h+cwxbox.page.top())+'px';
    },
    alpha:function(e,a,d){
     clearInterval(e.ai);
     if(d==1){
      e.style.opacity=0; 
      e.style.filter='alpha(opacity=0)';
      e.style.display = 'block';
     }
     e.ai = setInterval(function(){cwxbox.box.ta(e,a,d)},40);
    },
    ta:function(e,a,d){
     var anum = Math.round(e.style.opacity*100);
     if(anum == a){
      clearInterval(e.ai);
      if(d == -1){
       e.style.display = 'none';
       if(e == wd){
        this.alpha(bg,0,-1);
       }
      }else{
       if(e == bg){
        this.alpha(wd,100,1);
       }
      }
     }else{
      var n = Math.ceil((anum+((a-anum)*.5)));
      n = n == 1 &#63; 0 : n;
      e.style.opacity=n/100;
      e.style.filter='alpha(opacity='+n+')';
     }
    },
    getCss:function(e,n){
     var e_style = e.currentStyle &#63; e.currentStyle : window.getComputedStyle(e,null);
     if(e_style.display === 'none'){
      var clonDom = e.cloneNode(true);
      clonDom.style.cssText = 'position:absolute; display:block; top:-3000px;';
      document.body.appendChild(clonDom);
      var wh = clonDom[n];
      clonDom.parentNode.removeChild(clonDom);
      return wh;
     }
     return e[n];
    },
    drag:function(e){
     var startX,startY,mouse;
     mouse = {
      mouseup:function(){
       if(e.releaseCapture)
       {
        e.onmousemove=null;
        e.onmouseup=null;
        e.releaseCapture();
       }else{
        document.removeEventListener("mousemove",mouse.mousemove,true);
        document.removeEventListener("mouseup",mouse.mouseup,true);
       }
      },
      mousemove:function(ev){
       var oEvent = ev||event;
       e.style.left = oEvent.clientX - startX + "px"; 
       e.style.top = oEvent.clientY - startY + "px"; 
      }
     }
     e.onmousedown = function(ev){
      var oEvent = ev||event;
      startX = oEvent.clientX - this.offsetLeft; 
      startY = oEvent.clientY - this.offsetTop;
      if(e.setCapture)
      {
       e.onmousemove= mouse.mousemove;
       e.onmouseup= mouse.mouseup;
       e.setCapture();
      }else{
       document.addEventListener("mousemove",mouse.mousemove,true);
       document.addEventListener("mouseup",mouse.mouseup,true);
      }
     } 
    }
   }
  }()
  cwxbox.page = function(){
   return{
    top:function(){return document.documentElement.scrollTop||document.body.scrollTop},
    width:function(){return self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth},
    height:function(){return self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},
    total:function(d){
     var b=document.body, e=document.documentElement;
     return d&#63;Math.max(Math.max(b.scrollHeight,e.scrollHeight),Math.max(b.clientHeight,e.clientHeight)):
     Math.max(Math.max(b.scrollWidth,e.scrollWidth),Math.max(b.clientWidth,e.clientWidth))
    }
   } 
  }()
 </script>
</body>
</html>

Nach dem Login kopieren

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

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie schalte ich die vom 360 Browser empfohlenen Anzeigen aus? Wie deaktiviere ich die vom 360-Browser empfohlenen Anzeigen auf dem PC? Wie schalte ich die vom 360 Browser empfohlenen Anzeigen aus? Wie deaktiviere ich die vom 360-Browser empfohlenen Anzeigen auf dem PC? Mar 14, 2024 am 09:16 AM

Wie schalte ich die vom 360 Browser empfohlenen Anzeigen aus? Ich glaube, dass viele Benutzer den 360-Browser verwenden, aber dieser Browser zeigt manchmal Werbung an, was viele Benutzer sehr verunsichert. Lassen Sie diese Website den Benutzern sorgfältig erklären, wie Sie die vom 360-Browser empfohlenen Anzeigen auf Ihrem Computer deaktivieren können. Wie schalte ich die vom 360-Browser empfohlenen Anzeigen auf Ihrem Computer aus? Methode 1: 1. Öffnen Sie den 360 Safe Browser. 2. Suchen Sie das Logo „drei horizontale Balken“ in der oberen rechten Ecke und klicken Sie auf [Einstellungen]. 3. Suchen Sie in der Taskleiste auf der linken Seite der Popup-Oberfläche nach [Lab] und aktivieren Sie die Funktion „360-Hotspot-Informationen aktivieren“. Methode 2: 1. Erster Doppelklick

Was soll ich tun, wenn in Win10 keine Popup-Erinnerungen für Kalenderereignisse vorhanden sind? Wie kann ich die Wiederherstellung durchführen, wenn in Win10 keine Erinnerungen an Kalenderereignisse vorhanden sind? Was soll ich tun, wenn in Win10 keine Popup-Erinnerungen für Kalenderereignisse vorhanden sind? Wie kann ich die Wiederherstellung durchführen, wenn in Win10 keine Erinnerungen an Kalenderereignisse vorhanden sind? Jun 09, 2024 pm 02:52 PM

Der Kalender kann Benutzern dabei helfen, Ihren Zeitplan aufzuzeichnen und sogar Erinnerungen festzulegen. Viele Benutzer fragen sich jedoch, was zu tun ist, wenn in Windows 10 keine Erinnerungen an Kalenderereignisse angezeigt werden. Benutzer können zunächst den Windows-Update-Status überprüfen oder den Windows App Store-Cache leeren, um den Vorgang auszuführen. Lassen Sie diese Website den Benutzern die Analyse des Problems, dass die Kalenderereigniserinnerung in Win10 nicht angezeigt wird, sorgfältig vorstellen. Um Kalenderereignisse hinzuzufügen, klicken Sie im Systemmenü auf das Programm „Kalender“. Klicken Sie mit der linken Maustaste auf ein Datum im Kalender. Geben Sie im Bearbeitungsfenster den Namen des Ereignisses und die Erinnerungszeit ein und klicken Sie auf die Schaltfläche „Speichern“, um das Ereignis hinzuzufügen. Lösung des Problems, dass die Erinnerung an Win10-Kalenderereignisse nicht angezeigt wird

Wie schalte ich Sina News Express aus? Wie schalte ich Sina News Express aus? Mar 12, 2024 pm 09:46 PM

Die Sina News-Software bietet viele Schlagzeileninformationen, die im Wesentlichen von der offiziellen Plattform bereitgestellt werden. Der Inhalt jedes Nachrichtenartikels ist authentisch. Sie können mit einem Klick nach oben und unten wischen, um die Leseatmosphäre zu verbessern . Geben Sie Ihre Mobiltelefonnummer ein, um sich online anzumelden. Die 24-Stunden-Updates werden nicht wiederholt. Wischen Sie nach oben und unten, um sie auszuwählen Wenn Sie interessiert sind, können Sie die Nachrichten-Express-Funktion auch deaktivieren. Sie können sie jederzeit öffnen und eine Vorschau der umfangreichen Schlagzeilen anzeigen Details zu Sina News-Benutzern online. Suchen Sie nach Sina News und klicken Sie auf die untere rechte Ecke

So deaktivieren Sie das Sicherheitscenter in Windows 11 So deaktivieren Sie das Sicherheitscenter in Windows 11 Mar 28, 2024 am 10:21 AM

Windows 11 ist die neueste von Microsoft eingeführte Betriebssystemversion. Im Vergleich zu früheren Versionen verfügt Windows 11 über eine strengere Verwaltung und Überwachung der Systemsicherheit. Eine der wichtigen Funktionen ist das Sicherheitscenter. Security Center kann Benutzern dabei helfen, den Sicherheitsstatus des Systems zu verwalten und zu überwachen, um sicherzustellen, dass das System vor Malware und anderen Sicherheitsbedrohungen geschützt ist. Obwohl Security Center für den Schutz der Systemsicherheit wichtig ist, möchten Benutzer das Security Center manchmal aus persönlichen Gründen oder aus anderen Gründen deaktivieren. In diesem Artikel wird die Verwendung von W vorgestellt

Ausführliche Erklärung zum Deaktivieren des Windows 11-Sicherheitscenters Ausführliche Erklärung zum Deaktivieren des Windows 11-Sicherheitscenters Mar 27, 2024 pm 03:27 PM

Im Betriebssystem Windows 11 ist das Sicherheitscenter eine wichtige Funktion, die Benutzern hilft, den Sicherheitsstatus des Systems zu überwachen, sich gegen Malware zu verteidigen und die Privatsphäre zu schützen. Manchmal müssen Benutzer das Sicherheitscenter jedoch möglicherweise vorübergehend deaktivieren, beispielsweise wenn sie bestimmte Software installieren oder eine Systemoptimierung durchführen. In diesem Artikel erfahren Sie im Detail, wie Sie das Windows 11-Sicherheitscenter deaktivieren, damit Sie das System korrekt und sicher bedienen können. 1. So schalten Sie das Sicherheitscenter von Windows 11 aus Unter Windows 11 funktioniert das Ausschalten des Sicherheitscenters nicht

So schließen Sie die passwortfreie Zahlung in Kuaishou. Kuaishou-Tutorial zum Schließen der passwortfreien Zahlung So schließen Sie die passwortfreie Zahlung in Kuaishou. Kuaishou-Tutorial zum Schließen der passwortfreien Zahlung Mar 23, 2024 pm 09:21 PM

Kuaishou ist ein ausgezeichneter Videoplayer, der uns im täglichen Leben sehr helfen kann, insbesondere beim Kauf der benötigten Waren auf der Plattform . Jetzt müssen wir es abbrechen. Wie können wir die passwortfreie Zahlung effektiv abbrechen? Werfen wir einen Blick auf den gesamten Leitfaden auf dieser Website. Ich hoffe, er kann allen helfen. Anleitung zum Schließen der passwortfreien Zahlung in Kuaishou 1. Öffnen Sie die Kuaishou-App und klicken Sie auf die drei horizontalen Linien in der oberen linken Ecke. 2. Klicken Sie auf Kuaishou Store. 3. Suchen Sie in der Optionsleiste oben nach „Passwortfreie Zahlung“ und klicken Sie darauf. 4. Klicken Sie, um zu unterstützen

Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung Apr 03, 2024 am 11:55 AM

Die Technologie zur Gesichtserkennung und -erkennung ist bereits eine relativ ausgereifte und weit verbreitete Technologie. Derzeit ist JS die am weitesten verbreitete Internetanwendungssprache. Die Implementierung der Gesichtserkennung und -erkennung im Web-Frontend hat im Vergleich zur Back-End-Gesichtserkennung Vor- und Nachteile. Zu den Vorteilen gehören die Reduzierung der Netzwerkinteraktion und die Echtzeiterkennung, was die Wartezeit des Benutzers erheblich verkürzt und das Benutzererlebnis verbessert. Die Nachteile sind: Es ist durch die Größe des Modells begrenzt und auch die Genauigkeit ist begrenzt. Wie implementiert man mit js die Gesichtserkennung im Web? Um die Gesichtserkennung im Web zu implementieren, müssen Sie mit verwandten Programmiersprachen und -technologien wie JavaScript, HTML, CSS, WebRTC usw. vertraut sein. Gleichzeitig müssen Sie auch relevante Technologien für Computer Vision und künstliche Intelligenz beherrschen. Dies ist aufgrund des Designs der Webseite erwähnenswert

Wie kann ich den privaten Nachrichtenmodus aktivieren, wenn die andere Partei in der privaten TikTok-Nachricht den privaten Nachrichtenmodus deaktiviert hat? Kann ich sehen, ob die Person, der ich eine private Nachricht sende, den privaten Nachrichtenmodus deaktiviert hat? Wie kann ich den privaten Nachrichtenmodus aktivieren, wenn die andere Partei in der privaten TikTok-Nachricht den privaten Nachrichtenmodus deaktiviert hat? Kann ich sehen, ob die Person, der ich eine private Nachricht sende, den privaten Nachrichtenmodus deaktiviert hat? Mar 28, 2024 am 08:01 AM

Douyin ist eine beliebte soziale Kurzvideoplattform, die es Benutzern ermöglicht, einfach ihr Leben aufzuzeichnen und ihr Glück zu teilen. Die private Nachrichtenfunktion spielt in Douyin eine wichtige Rolle und ist eine der wichtigsten Möglichkeiten für Benutzer, miteinander zu interagieren. Manchmal kann es vorkommen, dass die andere Partei den privaten Nachrichtenmodus deaktiviert hat, was dazu führt, dass keine Nachrichten gesendet werden können. 1. Wie kann ich den privaten Nachrichtenmodus aktivieren, wenn die andere Partei in der privaten Douyin-Nachricht den privaten Nachrichtenmodus deaktiviert hat? 1. Bestätigen Sie, ob die andere Partei Datenschutzeinstellungen aktiviert hat. Zunächst sollten wir überprüfen, ob die andere Partei Datenschutzeinstellungen aktiviert hat, die möglicherweise den Empfang privater Nachrichten eingeschränkt haben. Wenn sie Einstellungen haben, die nur private Nachrichten von Bekannten zulassen, können wir versuchen, sie auf andere Weise zu kontaktieren, beispielsweise über gemeinsame Freunde oder Interaktionen auf Social-Media-Plattformen. 2. Senden Sie eine Freundschaftsanfrage, wenn die andere Partei die Datenschutzeinstellungen nicht aktiviert hat

See all articles