p& amp;amp;amp;amp;amp;amp;gt;>

'; 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 = ''; }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)) } } }()
[Ctrl A 全选 注:引入外部Js需再刷新一下页面才能执行]

js点击弹出div层实现可拖曳的弹窗效果的更多相关文章

  1. vue如何通过点击事件弹出弹窗页面详解

    弹窗是我们开发中经常遇到的一个功能,下面这篇文章主要给大家介绍了关于vue如何通过点击事件弹出弹窗页面的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

  2. react实现全局组件确认弹窗

    这篇文章主要为大家详细介绍了react实现全局组件确认弹窗,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  3. 简单实现jQuery弹窗效果

    这篇文章主要教大家简单实现jQuery弹窗效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. vue实现弹窗翻页多选效果

    这篇文章主要为大家详细介绍了vue实现弹窗翻页多选效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. 微信小程序自定义用户登录弹窗

    这篇文章主要为大家详细介绍了微信小程序自定义用户登录弹窗,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  6. 自己写一个uniapp全局弹窗(APP端)

    应用uni-app跨平台框架进行项目开发过程中,需要实现版本更新时全页面弹窗,底部导航栏无法点击的效果,下面这篇文章主要给大家介绍了关于uniapp全局弹窗(APP端)的相关资料,需要的朋友可以参考下

  7. vue实现弹窗引用另一个页面窗口

    这篇文章主要介绍了vue实现弹窗引用另一个页面窗口,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  8. 微信小程序实现点击出现弹窗

    这篇文章主要为大家详细介绍了微信小程序实现点击出现弹窗,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. Android Studio实现弹窗设置

    这篇文章主要为大家详细介绍了Android Studio实现弹窗设置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. 利用Vue3封装一个弹框组件简单吗

    最近在项目中自己封装的一个记录一下,下面这篇文章主要给大家介绍了关于利用Vue3封装一个弹框组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部