在很多网页上可以看到,点击网页的某个地方能够弹出一个新窗口,并且可以在屏幕中随意拖动,通过此篇文章给大家介绍 javascript 弹出拖动窗口,有需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
可以拖动的弹出窗口,在很多网页上都可以见到,非常的人性化,下面通过一段 javascript 代码就可以实现弹出拖动窗口,废话不多说了,直接贴代码了。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset=" utf-8">
- <meta name="author" content="http://www.phperz.com/" />
- <title>可以拖动的弹出窗口</title>
- <style type="text/CSS">
- #popDiv
- {
- position:absolute;
- visibility:hidden;
- overflow:hidden;
- border:2px solid #AEBBCA;
- background-color:#EEF1F8;
- cursor:move;
- padding:1px;
- }
- #popTitle
- {
- background:#9DACBF;
- height:20px;
- line-height:20px;
- padding:1px;
- }
- #popForm
- {
- padding:2px;
- }
- .title_left
- {
- font-weight:bold;
- padding-left:5px;
- float:left;
- }
- .title_right
- {
- float:right;
- }
- #popTitle .title_right a
- {
- color:#000;
- text-decoration:none;
- }
- #popTitle .title_right a:hover
- {
- text-decoration:underline;
- color:#FF0000;
- }
- </style>
- <script>
- function showPopup() //弹出层
- {
- var objDiv=document.getElementById("popDiv");
- objDiv.style.top="50px";//设置弹出层距离上边界的距离
- objDiv.style.left="200px";//设置弹出层距离左边界的距离
- objDiv.style.width="300px";//设置弹出层的宽度
- objDiv.style.height="200px";//设置弹出层的高度
- objDiv.style.visibility="visible";
- }
- function hidePopup()//关闭层
- {
- var objDiv=document.getElementById("popDiv");
- objDiv.style.visibility="hidden";
- }
- </script>
- </head>
- <body>
- <div id="popDiv">
- <div id="popTitle"> <!-- 标题div -->
- <span class="title_left">修改操作</span>
- <span class="title_right" onClick="hidePopup()"><a href="#">关闭</a></span>
- </div>
- <div id="popForm"></div>
- </div>
- <input name="" type="button" onClick="showPopup()" value="操作" />
- <script type="text/javascript">
- var objDiv=document.getElementById("popDiv");
- var isIE=document.all?true:false;//判断浏览器类型
- document.onmousedown = function(evnt)//当鼠标左键按下后执行此函数
- {
- var evnt=evnt?evnt:event;
- if(evnt.button == (document.all ? 1 : 0))
- {
- mouseD = true;//mouseD为鼠标左键状态标志,为true时表示左键被按下
- }
- }
- objDiv.onmousedown = function(evnt)
- {
- objDrag=this;//objDrag为拖动的对象
- var evnt=evnt?evnt:event;
- if(evnt.button == (document.all?1 : 0))
- {
- mx=evnt.clientX;
- my=evnt.clientY;
- objDiv.style.left=objDiv.offsetLeft+"px";
- objDiv.style.top=objDiv.offsetTop+"px";
- if(isIE)
- {
- objDiv.setCapture();
- }
- else
- {
- window.captureEvents(Event.MOUSEMOVE);
- }
- }
- }
- document.onmouseup=function()
- {
- mouseD=false;
- objDrag="";
- if(isIE)
- {
- objDiv.releaseCapture();
- }
- else
- {
- window.releaseEvents(objDiv.MOUSEMOVE);
- }
- }
- document.onmousemove=function(evnt)
- {
- var evnt=evnt?evnt:event;
- if(mouseD==true&&objDrag)
- {
- var mrx=evnt.clientX-mx;
- var mry=evnt.clientY-my;
- objDiv.style.left = parseInt(objDiv.style.left) + mrx + "px";
- objDiv.style.top = parseInt(objDiv.style.top) + mry + "px";
- mx = evnt.clientX;
- my = evnt.clientY;
- }
- }
- </script>
- </body>
- </html>
以上是本文实现 javascript 弹出拖动窗口的全部内容,希望对大家有所帮助。
来源: http://www.phperz.com/article/17/0215/270008.html