资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
js点击弹出div层实现可拖曳的弹窗效果
<!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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0AC%24('testClick').onclick%20%3D%20function()%7B%20%0D%0Avar%20neirong%20%3D%20'%3Cdiv%3E%3Cimg%20src%3D%22%2Fimages%2Flogo.gif%22%20class%3D%22imgd%22%20%2F%3E%3C%2Fdiv%3E'%3B%20%0D%0Acwxbox.box.show(neirong)%3B%20%0D%0A%7D%20%0D%0AC%24('testClick1').onclick%20%3D%20function()%7B%20%0D%0Avar%20neirong%20%3D%20'123456789132456789'%3B%20%0D%0Acwxbox.box.show(neirong%2C3)%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20C%24(id)%7Breturn%20document.getElementById(id)%3B%7D%20%0D%0A%2F%2F%E5%AE%9A%E4%B9%89%E7%AA%97%E4%BD%93%E5%AF%B9%E8%B1%A1%20%0D%0Avar%20cwxbox%20%3D%20%7B%7D%3B%20%0D%0A%0D%0Acwxbox.box%20%3D%20function()%7B%20%0D%0Avar%20bg%2Cwd%2Ccn%2Cow%2Coh%2Co%20%3D%20true%2Ctime%20%3D%20null%3B%20%0D%0Areturn%20%7B%20%0D%0Ashow%3Afunction(c%2Ct%2Cw%2Ch)%7B%20%0D%0Aif(o)%7B%20%0D%0Abg%20%3D%20document.createElement('div')%3B%20bg.id%20%3D%20'cwxBg'%3B%20%0D%0Awd%20%3D%20document.createElement('div')%3B%20wd.id%20%3D%20'cwxWd'%3B%20%0D%0Acn%20%3D%20document.createElement('div')%3B%20cn.id%20%3D%20'cwxCn'%3B%20%0D%0Adocument.body.appendChild(bg)%3B%20%0D%0Adocument.body.appendChild(wd)%3B%20%0D%0Awd.appendChild(cn)%3B%20%0D%0Abg.onclick%20%3D%20cwxbox.box.hide%3B%20%0D%0Awindow.onresize%20%3D%20this.init%3B%20%0D%0Awindow.onscroll%20%3D%20this.scrolls%3B%20%0D%0Ao%20%3D%20false%3B%20%0D%0A%7D%20%0D%0Aif(w%20%26%26%20h)%7B%20%0D%0Avar%20inhtml%20%3D%20'%3Ciframe%20src%3D%22'%2B%20c%20%2B'%22%20width%3D%22'%2B%20w%20%2B'%22%20height%3D%22'%2B%20h%20%2B'%22%20frameborder%3D%220%22%3E%3C%2Fiframe%3E'%3B%20%0D%0A%7Delse%7B%20%0D%0Avar%20inhtml%20%3D%20c%3B%20%0D%0A%7D%20%0D%0Acn.innerHTML%20%3D%20inhtml%3B%20%0D%0Aoh%20%3D%20this.getCss(wd%2C'offsetHeight')%3B%20%0D%0Aow%20%3D%20this.getCss(wd%2C'offsetWidth')%3B%20%0D%0Athis.init()%3B%20%0D%0Athis.alpha(bg%2C50%2C1)%3B%20%0D%0Athis.drag(wd)%3B%20%0D%0Aif(t)%7B%20%0D%0Atime%20%3D%20setTimeout(function()%7Bcwxbox.box.hide()%7D%2Ct*1000)%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0Ahide%3Afunction()%7B%20%0D%0Acwxbox.box.alpha(wd%2C0%2C-1)%3B%20%0D%0AclearTimeout(time)%3B%20%0D%0A%7D%2C%20%0D%0Ainit%3Afunction()%7B%20%0D%0Abg.style.height%20%3D%20cwxbox.page.total(1)%2B'px'%3B%20%0D%0Abg.style.width%20%3D%20''%3B%20%0D%0Abg.style.width%20%3D%20cwxbox.page.total(0)%2B'px'%3B%20%0D%0Avar%20h%20%3D%20(cwxbox.page.height()%20-%20oh)%20%2F2%3B%20%0D%0Awd.style.top%3D(h%2Bcwxbox.page.top())%2B'px'%3B%20%0D%0Awd.style.left%3D(cwxbox.page.width()%20-%20ow)%2F2%2B'px'%3B%20%0D%0A%7D%2C%20%0D%0Ascrolls%3Afunction()%7B%20%0D%0Avar%20h%20%3D%20(cwxbox.page.height()%20-%20oh)%20%2F2%3B%20%0D%0Awd.style.top%3D(h%2Bcwxbox.page.top())%2B'px'%3B%20%0D%0A%7D%2C%20%0D%0Aalpha%3Afunction(e%2Ca%2Cd)%7B%20%0D%0AclearInterval(e.ai)%3B%20%0D%0Aif(d%3D%3D1)%7B%20%0D%0Ae.style.opacity%3D0%3B%20%0D%0Ae.style.filter%3D'alpha(opacity%3D0)'%3B%20%0D%0Ae.style.display%20%3D%20'block'%3B%20%0D%0A%7D%20%0D%0Ae.ai%20%3D%20setInterval(function()%7Bcwxbox.box.ta(e%2Ca%2Cd)%7D%2C40)%3B%20%0D%0A%7D%2C%20%0D%0Ata%3Afunction(e%2Ca%2Cd)%7B%20%0D%0Avar%20anum%20%3D%20Math.round(e.style.opacity*100)%3B%20%0D%0Aif(anum%20%3D%3D%20a)%7B%20%0D%0AclearInterval(e.ai)%3B%20%0D%0Aif(d%20%3D%3D%20-1)%7B%20%0D%0Ae.style.display%20%3D%20'none'%3B%20%0D%0Aif(e%20%3D%3D%20wd)%7B%20%0D%0Athis.alpha(bg%2C0%2C-1)%3B%20%0D%0A%7D%20%0D%0A%7Delse%7B%20%0D%0Aif(e%20%3D%3D%20bg)%7B%20%0D%0Athis.alpha(wd%2C100%2C1)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7Delse%7B%20%0D%0Avar%20n%20%3D%20Math.ceil((anum%2B((a-anum)*.5)))%3B%20%0D%0An%20%3D%20n%20%3D%3D%201%20%3F%200%20%3A%20n%3B%20%0D%0Ae.style.opacity%3Dn%2F100%3B%20%0D%0Ae.style.filter%3D'alpha(opacity%3D'%2Bn%2B')'%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0AgetCss%3Afunction(e%2Cn)%7B%20%0D%0Avar%20e_style%20%3D%20e.currentStyle%20%3F%20e.currentStyle%20%3A%20window.getComputedStyle(e%2Cnull)%3B%20%0D%0Aif(e_style.display%20%3D%3D%3D%20'none')%7B%20%0D%0Avar%20clonDom%20%3D%20e.cloneNode(true)%3B%20%0D%0AclonDom.style.cssText%20%3D%20'position%3Aabsolute%3B%20display%3Ablock%3B%20top%3A-3000px%3B'%3B%20%0D%0Adocument.body.appendChild(clonDom)%3B%20%0D%0Avar%20wh%20%3D%20clonDom%5Bn%5D%3B%20%0D%0AclonDom.parentNode.removeChild(clonDom)%3B%20%0D%0Areturn%20wh%3B%20%0D%0A%7D%20%0D%0Areturn%20e%5Bn%5D%3B%20%0D%0A%7D%2C%20%0D%0Adrag%3Afunction(e)%7B%20%0D%0Avar%20startX%2CstartY%2Cmouse%3B%20%0D%0Amouse%20%3D%20%7B%20%0D%0Amouseup%3Afunction()%7B%20%0D%0Aif(e.releaseCapture)%20%0D%0A%7B%20%0D%0Ae.onmousemove%3Dnull%3B%20%0D%0Ae.onmouseup%3Dnull%3B%20%0D%0Ae.releaseCapture()%3B%20%0D%0A%7Delse%7B%20%0D%0Adocument.removeEventListener(%22mousemove%22%2Cmouse.mousemove%2Ctrue)%3B%20%0D%0Adocument.removeEventListener(%22mouseup%22%2Cmouse.mouseup%2Ctrue)%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0Amousemove%3Afunction(ev)%7B%20%0D%0Avar%20oEvent%20%3D%20ev%7C%7Cevent%3B%20%0D%0Ae.style.left%20%3D%20oEvent.clientX%20-%20startX%20%2B%20%22px%22%3B%20%0D%0Ae.style.top%20%3D%20oEvent.clientY%20-%20startY%20%2B%20%22px%22%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Ae.onmousedown%20%3D%20function(ev)%7B%20%0D%0Avar%20oEvent%20%3D%20ev%7C%7Cevent%3B%20%0D%0AstartX%20%3D%20oEvent.clientX%20-%20this.offsetLeft%3B%20%0D%0AstartY%20%3D%20oEvent.clientY%20-%20this.offsetTop%3B%20%0D%0Aif(e.setCapture)%20%0D%0A%7B%20%0D%0Ae.onmousemove%3D%20mouse.mousemove%3B%20%0D%0Ae.onmouseup%3D%20mouse.mouseup%3B%20%0D%0Ae.setCapture()%3B%20%0D%0A%7Delse%7B%20%0D%0Adocument.addEventListener(%22mousemove%22%2Cmouse.mousemove%2Ctrue)%3B%20%0D%0Adocument.addEventListener(%22mouseup%22%2Cmouse.mouseup%2Ctrue)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D()%20%0D%0A%0D%0Acwxbox.page%20%3D%20function()%7B%20%0D%0Areturn%7B%20%0D%0Atop%3Afunction()%7Breturn%20document.documentElement.scrollTop%7C%7Cdocument.body.scrollTop%7D%2C%20%0D%0Awidth%3Afunction()%7Breturn%20self.innerWidth%7C%7Cdocument.documentElement.clientWidth%7C%7Cdocument.body.clientWidth%7D%2C%20%0D%0Aheight%3Afunction()%7Breturn%20self.innerHeight%7C%7Cdocument.documentElement.clientHeight%7C%7Cdocument.body.clientHeight%7D%2C%20%0D%0Atotal%3Afunction(d)%7B%20%0D%0Avar%20b%3Ddocument.body%2C%20e%3Ddocument.documentElement%3B%20%0D%0Areturn%20d%3FMath.max(Math.max(b.scrollHeight%2Ce.scrollHeight)%2CMath.max(b.clientHeight%2Ce.clientHeight))%3A%20%0D%0AMath.max(Math.max(b.scrollWidth%2Ce.scrollWidth)%2CMath.max(b.clientWidth%2Ce.clientWidth))%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D()%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程