JAVASCRIPT之弹出层、弹窗效果+拖曳功能

雨点打透心脏的1/2处 2022-07-12 04:19 200阅读 0赞

![20170210113939418][]

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>JAVASCRIPT之弹出层、弹窗效果+拖曳功能</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: 256px;
    	height: 256px;
    }
    </style>
    </head>
    <body>
    
    <div class="mybody">
      <div class="botton" id="testClick">图片测试</div>
      <div class="botton" id="testClick1">文字测试</div>
    </div>
    <script type="text/javascript"> 
    C$('testClick').onclick = function(){ 
    var neirong = '<div><img src="http://www.99danji.com/uploadfile/2015/0623/20150623054920688.png" class="imgd" /></div>'; 
    cwxbox.box.show(neirong); 
    } 
    C$('testClick1').onclick = function(){ 
    var neirong = '文字测试--文字测试'; 
    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 ? 0 : n; 
    e.style.opacity=n/100; 
    e.style.filter='alpha(opacity='+n+')'; 
    } 
    }, 
    getCss:function(e,n){ 
    var e_style = e.currentStyle ? 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.οnmοusemοve=null; 
    e.οnmοuseup=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.οnmοusemοve= mouse.mousemove; 
    e.οnmοuseup= 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?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>

[20170210113939418]: /images/20220711/17f53477897647109abf4a819a1a6403.png