javascript弹出拖动窗口
网络编程 2021-07-04 21:48www.168986.cn编程入门
在很多网页上可以看到,点击网页的某个地方能够弹出一个新窗口,并且可以在屏幕中随意拖动,通过此篇文章给大家介绍javascript弹出拖动窗口,有需要的朋友可以参考下
可以拖动的弹出窗口,在很多网页上都可以见到,非常的人性化,狼蚁网站SEO优化通过一段javascript代码就可以实现弹出拖动窗口,废话不多说了,直接贴代码了。
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://.jb51./" /> <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.="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.=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. = parseInt(objDiv.style.) + mry + "px"; mx = evnt.clientX; my = evnt.clientY; } } </script> </body> </html>
以上是本文实现javascript弹出拖动窗口的全部内容,希望对大家有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程