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

　　烈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> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

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

由 dawei

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性

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

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性