代码简洁的模态窗口,可拖动、拽的层代码

发布时间：2018-09-16 11:55:06 所属栏目：聚会来源：站长网

导读：烈98火59网(LieHuo32.Net)教63程本文给大家介绍的是：代码简洁的模态窗口,可拖动、拽的层代码。支持多浏览器，代码很少。不过操作体验还是不错的，经测试，IE6/7,FF, Opera 9, Safari 等众多浏览器都兼容，运行无错，奉献给大家。演示： !DOCTYPE html

　　烈98火59网(LieHuo32.Net)教63程本文给大家介绍的是：代码简洁的模态窗口,可拖动、拽的层代码。

　　支持多浏览器，代码很少。不过操作体验还是不错的，经测试，IE6/7,FF,Opera9,Safari 等众多浏览器都兼容，运行无错，奉献给大家。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>最简单的拖动层 - www.veryhuo.com </title> </head> <body> <div id="f" style="position: absolute; width: 500px; height: 350px; background-color: #ccc; top: 150px; left: 200px; z-index: 101; border: solid 1px blue;"> <div id="title" style="background-color: Blue; cursor: move; height: 20px; color: #fff; font-size: 13px; padding-top: 5px; padding-left: 10px;">烈火学院 Liehuo.Net </div> </div> <script type="text/javascript"> var posX; var posY; fdiv = document.getElementById("f"); document.getElementById("title").onmousedown=function(e) { if(!e) e = window.event; posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - parseInt(fdiv.style.top); document.onmousemove = mousemove; } document.onmouseup = function() { document.onmousemove = null; } function mousemove(ev) { if(ev==null) ev = window.event; fdiv.style.left = (ev.clientX - posX) + "px"; fdiv.style.top = ev.clientY - posY + "px"; } // 网页特效来自：烈火学院 http://www.veryhuo.com </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：济南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!