JS melaksanakan kemahiran effect_javascript tetingkap pop timbul boleh seret dan boleh ditutup-tutorial js-php.cn

JS melaksanakan kemahiran effect_javascript tetingkap pop timbul boleh seret dan boleh ditutup

WBOY

Lepaskan： 2016-05-16 15:37:57

asal

1519 orang telah melayarinya

Contoh dalam artikel ini menerangkan pelaksanaan kesan tetingkap timbul yang boleh diseret dan boleh ditutup menggunakan JS. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Jalankan contoh ini, klik pada teks, dan tetingkap akan muncul. Lapisan pop timbul ini boleh diseret dengan tetikus lapisan teks pop timbul dan lapisan gambar timbul menggunakan kaedah ini Sila pilih mengikut pilihan anda.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

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

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.