js点击弹出div层实现可拖曳的弹窗效果

更新时间：2012年12月26日 09:48:34 作者：

点击文字，弹出一个窗口，其实是一个弹出层，这个弹出层可以随鼠标拖曳，很炫的哦，另外，示例演示了用本方法弹出文字层和弹出图片层的具体代码，请根据选择使用哦，感兴趣的朋友可以研究下

<!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这里是一段文字哦！<div class="botton" id="testClick1">点击测试</div> </div> <script type="text/javascript"> C$('testClick').onclick = function(){ var neirong = '<div><img src="/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 ? 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.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?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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

纯CSS实现扑克牌效果
纯CSS实现扑克牌效果，太牛了吧？开始我还以为是一张图片呢，后来发现代码里没有调用任何图片，顿时有点诧异，CSS果然很牛，或是作者水平比较牛？
2010-09-09
js超漂亮的鼠标提示，带人性化缺口
漂亮的鼠标提示，带人性化缺口，在测试时候大家可改变浏览器窗口大小，可以看到缺口会根据网页的大小智能改变方向，以确保提示位置的正确性，其实由此大家可以学习到更多的JavaScript与CSs代码知识。
2010-11-11
带你快速上手前端响应式布局与Bootstrap栅格系统
这篇文章带你快速上手前端响应式布局与Bootstrap栅格系统,响应式布局主要是针对各种不同尺寸的屏幕兼容性问题,需要的朋友可以参考下
2023-03-03
仿Discuz!的论坛评分发帖弹出提示并渐渐消失的效果
仿Discuz!论坛评分发帖弹出提示并渐渐消失的效果，相信不少朋友都见到过这效果吧
2010-10-10
js最简单的拖拽效果实现代码
说到拖拽功能，现在各大，中，小型网站都基本上有类似的东西，特别是对弹出层拖拽，更是常见的一塌糊涂。。。
2010-09-09
js漂浮广告实现代码（合集经典）符合W3C
js漂浮广告实现代码，实际上就是一个来回滚动的小图片，碰到边缘就返回，也是一种广告形式，需要的朋友可以收藏下
2012-04-04
可在线编辑网页文字效果代码(单击)
可在线编辑网页文字效果代码，点击即可编辑文字，喜欢的朋友可以参考下
2013-03-03
js点击弹出div层实现可拖曳的弹窗效果
点击文字，弹出一个窗口，其实是一个弹出层，这个弹出层可以随鼠标拖曳，很炫的哦，另外，示例演示了用本方法弹出文字层和弹出图片层的具体代码，请根据选择使用哦，感兴趣的朋友可以研究下
2012-12-12
js 左右悬浮对联广告特效代码
一段js 左右悬浮广告特效代码，js制作web网页左右悬浮广告特效，左右悬浮广告通常也称为对联广告，需要的朋友参考下
2014-12-12
始终在页面底部的层js实现代码
其实就是通过js将层始终定位在底部，多用于提示效果
2012-11-11