首頁 web前端 js教程 JS實作可拖曳、可關閉的彈跳窗效果_javascript技巧

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

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工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

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

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

360瀏覽器推薦的廣告如何關閉?如何關閉電腦360瀏覽器推薦的廣告? 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日曆事件提醒沒了的恢復方法 win10日曆事件沒有彈跳窗提醒怎麼辦?win10日曆事件提醒沒了的恢復方法 Jun 09, 2024 pm 02:52 PM

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

Windows 11安全中心關閉方法詳解 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安全中心即時保護關閉方法詳解 Windows安全中心即時保護關閉方法詳解 Mar 27, 2024 pm 02:30 PM

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

See all articles