JS實作可拖曳、可關閉的彈跳窗效果_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

JS實作可拖曳、可關閉的彈跳窗效果_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:37 PM

js 關閉彈跳窗

本文實例講述了JS實現可拖曳、可關閉的彈跳窗效果。分享給大家供大家參考。具體如下：

運行該實例，點擊文字，彈出一個窗口，其實是一個彈出層，這個彈出層可以隨滑鼠拖曳，另外，示例演示了用本方法彈出文字層和彈出圖片層的具體代碼，請根據選擇使用哦。

運作效果截圖如下：

線上示範網址如下：

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

具體程式碼如下：

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

登入後複製

希望本文所述對大家的JavaScript程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7773

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1296

PHP教程

1234

Related knowledge

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

360瀏覽器推薦的廣告如何關閉？如何關閉電腦360瀏覽器推薦的廣告？ Mar 14, 2024 am 09:16 AM

　　360瀏覽器推薦的廣告如何關閉？相信很多的用戶都在使用360瀏覽器，不過這款瀏覽器有時候會彈出廣告，這就使得很多的用戶們都十分的苦惱，下面就讓本站來為用戶們來仔細的介紹一下如何關閉電腦360瀏覽器推薦的廣告吧。　　如何關機360瀏覽器推薦的廣告？　　方法一：　　1、開啟360安全瀏覽器。　　2、找到右上角「三橫槓」標誌，點選【設定】。　　3、在彈出的介面左側工作列中找到【實驗室】，勾選【啟用「360熱點資訊」功能】即可。　　方法二：　　1、先雙擊

新浪新聞速遞怎麼關閉關閉速遞功能的操作步驟 Mar 12, 2024 pm 09:46 PM

　　新浪新聞軟體內提供的新聞頭條資訊非常多，基本上都是官方平台推送的，每一篇新聞文章內容都是擁有真實性的，上下滑動一鍵搜尋翻閱，整體的閱讀氛圍更加舒適。輸入手機號碼在線上登錄，不同領域的新聞頻道都是開放的，二十四小時更新都是不重複的，國內外、地方時事新聞都不會少的，上下滑動選擇一鍵翻閱，新聞內容都是大家感興趣的，還能關閉新聞速遞功能，這樣也不會被影響到，任何時候都可以打開一覽，海量熱門的新聞頭條新鮮事搶先看，現在小編在線詳細為新浪新聞用戶們帶來關閉速遞功能的操作步驟。　　找到新浪新聞進入，點選右下角

win10日曆事件沒有彈跳窗提醒怎麼辦?win10日曆事件提醒沒了的恢復方法 Jun 09, 2024 pm 02:52 PM

行事曆可以幫助使用者記錄你的行程，甚至可以設定提醒，但是也有不少的使用者在詢問win10行事曆事件提醒不彈出怎麼辦？使用者可以先檢查windows更新狀況或是清除windows應用程式商店快取來進行操作就可以了。以下就讓本站來為使用者來仔細的介紹一下win10日曆事件提醒不彈出問題解析吧。新增日曆事件在系統選單中點選「日曆」程式。滑鼠左鍵點擊日曆中的日期。在編輯視窗輸入事件名稱和提醒時間，點選「儲存」按鈕即可新增事件了。 win10日曆事件提醒不彈出問題解決

Windows 11安全中心關閉方法詳解 Mar 27, 2024 pm 03:27 PM

在Windows11作業系統中，安全中心是一個重要的功能，它可幫助使用者監控系統安全狀態、防禦惡意軟體和保護個人隱私。然而，有時使用者可能需要暫時關閉安全中心，例如在安裝某些軟體或進行系統調優時。本文將詳細介紹Windows11安全中心的關閉方法，協助您正確且安全地作業系統。 1.如何關閉Windows11安全中心在Windows11中，關閉安全中心並不

抖音私訊對方關閉了私訊模式怎麼開啟？私訊對方關閉了私訊模式看得到嗎？ Mar 28, 2024 am 08:01 AM

抖音是一款備受歡迎的短影片社群平台，讓使用者可以簡單地記錄生活、分享快樂。私訊功能在抖音中扮演著重要的角色，是使用者互動的主要方式之一。有時候，用戶可能會碰到對方關閉了私訊模式，導致無法傳送訊息的情況。一、抖音私訊對方關閉了私訊模式怎麼開啟？ 1.確認對方是否開啟了隱私設置首先，我們應該確認對方是否啟用了隱私設置，可能已經限制了私訊的接收。如果他們設定了僅允許熟人私信，我們可以嘗試透過其他途徑聯繫他們，例如透過共同的朋友或在社群媒體平台上互動。 2.發送好友申請如果對方並未開啟隱私設置，那麼我們

快手怎麼關閉免機密支付快手關閉免機密支付方法教學 Mar 23, 2024 pm 09:21 PM

快手是一款很卓越的影片播放器，快手中的免密支付功能小夥伴們都非常熟悉，在日常生活中可以給我們很大的幫助，尤其是在平台中購買自己需要的商品時可以更好的去支付，我們現在要去取消掉該如何操作呢?怎麼樣才能真正有效取消掉免密支付功能?免密支付取消的方法非常簡單，具體的操作方法已經整理好了，讓我們一起到本站本站中來看整篇攻略吧，希望能夠幫助大家。快手關閉免機密支付方式教學　　1、開啟快手app，點選左上角的三條橫線。　　2、點選快手小店。　　3、在上面的選項列中，找到免密付款並點擊進去。　　4、點擊支

Windows安全中心即時保護關閉方法詳解 Mar 27, 2024 pm 02:30 PM

Windows作業系統作為全球用戶數量最龐大的作業系統之一，一直以來備受用戶青睞。然而，在使用Windows系統時，使用者可能會遇到許多安全隱患，例如病毒攻擊、惡意軟體等威脅。為了強化系統安全，Windows系統內建了許多安全保護機制，其中之一就是Windows安全中心的即時保護功能。今天，我們將會詳細介紹Windows安全中心即時保護的關閉方法。首先，讓我們

See all articles

JS實作可拖曳、可關閉的彈跳窗效果_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題