1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>可用移动弹层 </title> 5 <style type="text/css"> 6 * 7 { 8 margin: 0px; 9 padding: 0px; 10 } 11 body 12 { 13 font-size: 12px; 14 font: Arial, Helvetica, sans-serif; 15 margin: 25PX 0PX; 16 background: #eee; 17 } 18 .botton 19 { 20 color: #F00; 21 cursor: pointer; 22 font-size: large; 23 } 24 .mybody 25 { 26 width: 600px; 27 margin: 0 auto; 28 height: 1500px; 29 border: 1px solid #ccc; 30 padding: 20px 25px; 31 background: #fff; 32 } 33 #cwxBg 34 { 35 position: absolute; 36 display: none; 37 background: #000; 38 width: 100%; 39 height: 100%; 40 left: 0px; 41 top: 0px; 42 z-index: 1000; 43 } 44 #cwxWd 45 { 46 position: absolute; 47 display: none; 48 border: 10px solid #CCC; 49 padding: 10px; 50 background: #FFF; 51 z-index: 1500; 52 } 53 #cwxCn 54 { 55 background: #FFF; 56 display: block; 57 } 58 .imgd 59 { 60 width: 400px; 61 height: 300px; 62 } 63 p 64 { 65 border: 1px solid #13f; 66 height: 300px; 67 } 68 </style> 69 </head> 70 <body> 71 <!--弹层--> 72 <div class="mybody"> 73 <div class="botton" id="testClick"> 74 点一下</div> 75 <p> 76 这里是网页的内容</p> 77 <div class="botton" id="testClick1"> 78 点一下</div> 79 </div> 80 </body> 81 </html> 82 <script type="text/javascript"> 83 C$('testClick').onclick = function () { 84 var neirong = '<div><img src="http://images.cnblogs.com/logo.gif" class="imgd" /></div>'; 85 cwxbox.box.show(neirong); 86 } 87 C$('testClick1').onclick = function () { 88 var neirong = '呵~O(∩_∩)O~呵'; 89 cwxbox.box.show(neirong, 3); 90 } 91 92 function C$(id) { return document.getElementById(id); } 93 //定义窗体对象 94 var cwxbox = {}; 95 96 cwxbox.box = function () { 97 var bg, wd, cn, ow, oh, o = true, time = null; 98 return { 99 show: function (c, t, w, h) { 100 if (o) { 101 bg = document.createElement('div'); bg.id = 'cwxBg'; 102 wd = document.createElement('div'); wd.id = 'cwxWd'; 103 cn = document.createElement('div'); cn.id = 'cwxCn'; 104 document.body.appendChild(bg); 105 document.body.appendChild(wd); 106 wd.appendChild(cn); 107 bg.onclick = cwxbox.box.hide; 108 window.onresize = this.init; 109 window.onscroll = this.scrolls; 110 o = false; 111 } 112 if (w && h) { 113 var inhtml = '<iframe src="' + c + '" width="' + w + '" height="' + h + '" frameborder="0"></iframe>'; 114 } else { 115 var inhtml = c; 116 } 117 cn.innerHTML = inhtml; 118 oh = this.getCss(wd, 'offsetHeight'); 119 ow = this.getCss(wd, 'offsetWidth'); 120 this.init(); 121 this.alpha(bg, 50, 1); 122 this.drag(wd); 123 if (t) { 124 time = setTimeout(function () { cwxbox.box.hide() }, t * 1000); 125 } 126 }, 127 hide: function () { 128 cwxbox.box.alpha(wd, 0, -1); 129 clearTimeout(time); 130 }, 131 init: function () { 132 bg.style.height = cwxbox.page.total(1) + 'px'; 133 bg.style.width = ''; 134 bg.style.width = cwxbox.page.total(0) + 'px'; 135 var h = (cwxbox.page.height() - oh) / 2; 136 wd.style.top = (h + cwxbox.page.top()) + 'px'; 137 wd.style.left = (cwxbox.page.width() - ow) / 2 + 'px'; 138 }, 139 scrolls: function () { 140 var h = (cwxbox.page.height() - oh) / 2; 141 wd.style.top = (h + cwxbox.page.top()) + 'px'; 142 }, 143 alpha: function (e, a, d) { 144 clearInterval(e.ai); 145 if (d == 1) { 146 e.style.opacity = 0; 147 e.style.filter = 'alpha(opacity=0)'; 148 e.style.display = 'block'; 149 } 150 e.ai = setInterval(function () { cwxbox.box.ta(e, a, d) }, 40); 151 }, 152 ta: function (e, a, d) { 153 var anum = Math.round(e.style.opacity * 100); 154 if (anum == a) { 155 clearInterval(e.ai); 156 if (d == -1) { 157 e.style.display = 'none'; 158 if (e == wd) { 159 this.alpha(bg, 0, -1); 160 } 161 } else { 162 if (e == bg) { 163 this.alpha(wd, 100, 1); 164 } 165 } 166 } else { 167 var n = Math.ceil((anum + ((a - anum) * .5))); 168 n = n == 1 ? 0 : n; 169 e.style.opacity = n / 100; 170 e.style.filter = 'alpha(opacity=' + n + ')'; 171 } 172 }, 173 getCss: function (e, n) { 174 var e_style = e.currentStyle ? e.currentStyle : window.getComputedStyle(e, null); 175 if (e_style.display === 'none') { 176 var clonDom = e.cloneNode(true); 177 clonDom.style.cssText = 'position:absolute; display:block; top:-3000px;'; 178 document.body.appendChild(clonDom); 179 var wh = clonDom[n]; 180 clonDom.parentNode.removeChild(clonDom); 181 return wh; 182 } 183 return e[n]; 184 }, 185 drag: function (e) { 186 var startX, startY, mouse; 187 mouse = { 188 mouseup: function () { 189 if (e.releaseCapture) { 190 e.onmousemove = null; 191 e.onmouseup = null; 192 e.releaseCapture(); 193 } else { 194 document.removeEventListener("mousemove", mouse.mousemove, true); 195 document.removeEventListener("mouseup", mouse.mouseup, true); 196 } 197 }, 198 mousemove: function (ev) { 199 var oEvent = ev || event; 200 e.style.left = oEvent.clientX - startX + "px"; 201 e.style.top = oEvent.clientY - startY + "px"; 202 } 203 } 204 e.onmousedown = function (ev) { 205 var oEvent = ev || event; 206 startX = oEvent.clientX - this.offsetLeft; 207 startY = oEvent.clientY - this.offsetTop; 208 if (e.setCapture) { 209 e.onmousemove = mouse.mousemove; 210 e.onmouseup = mouse.mouseup; 211 e.setCapture(); 212 } else { 213 document.addEventListener("mousemove", mouse.mousemove, true); 214 document.addEventListener("mouseup", mouse.mouseup, true); 215 } 216 } 217 218 } 219 } 220 } () 221 222 cwxbox.page = function () { 223 return { 224 top: function () { return document.documentElement.scrollTop || document.body.scrollTop }, 225 function () { return self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth }, 226 height: function () { return self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight }, 227 total: function (d) { 228 var b = document.body, e = document.documentElement; 229 return d ? Math.max(Math.max(b.scrollHeight, e.scrollHeight), Math.max(b.clientHeight, e.clientHeight)) : 230 Math.max(Math.max(b.scrollWidth, e.scrollWidth), Math.max(b.clientWidth, e.clientWidth)) 231 } 232 } 233 } () 234 </script>