网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 JS弹出可拖拽可关闭的div层完整实例
内容
    这篇文章主要介绍了JS弹出可拖拽可关闭的div层完整实现方法,包括对div弹出层的样式及功能的实现技巧,非常具有实用价值,需要的朋友可以参考下
    本文实例讲述了JS弹出可拖拽可关闭的div层完整实现方法。分享给大家供大家参考。具体实现方法如下：
    代码如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS弹出可拖拽可关闭的div层</title>
    <style>
    html,body{height:100%;overflow:hidden;}
    body,div,h2{margin:0;padding:0;}
    body{font:12px/1.5 Tahoma;}
    center{padding-top:10px;}
    button{cursor:pointer;}
    #win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;}
    h2{font-size:12px;height:18px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;cursor:move;}
    h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;}
    </style>
    <script>
    window.onload = function ()
    {
    var oWin = document.getElementById("win");
    var oBtn = document.getElementsByTagName("button")[0];
    var oClose = document.getElementById("close");
    var oH2 = oWin.getElementsByTagName("h2")[0];
    var bDrag = false;
    var disX = disY = 0;
    oBtn.onclick = function ()
    {
    oWin.style.display = "block"
    };
    oClose.onclick = function ()
    {
    oWin.style.display = "none"
    };
    oClose.onmousedown = function (event)
    {
    (event || window.event).cancelBubble = true;
    };
    oH2.onmousedown = function (event)
    {
    var event = event || window.event;
    bDrag = true;
    disX = event.clientX - oWin.offsetLeft;
    disY = event.clientY - oWin.offsetTop;
    this.setCapture && this.setCapture();
    return false
    };
    document.onmousemove = function (event)
    {
    if (!bDrag) return;
    var event = event || window.event;
    var iL = event.clientX - disX;
    var iT = event.clientY - disY;
    var maxL = document.documentElement.clientWidth - oWin.offsetWidth;
    var maxT = document.documentElement.clientHeight - oWin.offsetHeight;
    iL = iL < 0 ? 0 : iL;
    iL = iL > maxL ? maxL : iL;
    iT = iT < 0 ? 0 : iT;
    iT = iT > maxT ? maxT : iT;
    oWin.style.marginTop = oWin.style.marginLeft = 0;
    oWin.style.left = iL + "px";
    oWin.style.top = iT + "px";
    return false
    };
    document.onmouseup = window.onblur = oH2.onlosecapture = function ()
    {
    bDrag = false;
    oH2.releaseCapture && oH2.releaseCapture();
    };
    };
    </script>
    </head>
    <body>
    <div id="win"><h2><span id="close">×</span></h2></div>
    <center><button>弹出层</button></center>
    </body>
    </html>
    希望本文所述对大家的javascript程序设计有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/12 19:40:06