zoukankan      html  css  js  c++  java
  • 遮罩层效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>��</title>
    <style type="text/css">
    <!--
    html
    {
    height: 100%;
    }
    body
    {
    margin: 0px;
    padding: 0px;
    height: 100%;
    }
    #dt_3
    {
    cursor: pointer;
    }
    div#mbDIV
    {
    position: absolute;top: 0px;left: 0px; 100%;height: 100%;background-color: #AAAAAA;z-index: 10;
    filter: alpha(opacity=80);opacity:0.8;
    }
    div#loginDIV
    {position: absolute; 300px;height: 150px;background-color: #FFFF00;z-index: 20;
    }
    div#loginTopDIV
    { 100%;height: 20px;background-color: #FF0000;cursor: move;
    }
    -->
    </style>
    <script type="text/javascript">
    <!--
    function show(ele)
    {
    eval(ele + ".style.display = ''");
    }
    function hidden(ele)
    {
    eval(ele + ".style.display = 'none'");
    }
    //-->
    </script>
    </head>
    <body>
    <div style="overflow: hidden;">
    <h3>���� --> 03����-��</h3>
    <p id="dt_1">01����-��</p>
    <p id="dt_2">02����-��</p>
    <p id="dt_3">03����-��</p>
    <p id="dt_4">04����-��</p>
    <p id="dt_5">05����-��</p>
    <p id="dt_6">06����-��</p>
    <p id="dt_7">07����-��</p>
    <p id="dt_8">08����-��</p>
    <p id="dt_9">09����-��</p>
    <p id="dt_10">10����-��</p>
    <p id="dt_11">11����-��</p>
    </div>
    <div id="mbDIV" style="display: none;"></div>
    <div id="loginDIV" style="top: 200px;left: 300px;display: none;">
    <div id="loginTopDIV">Move</div>
    <p style="text-align: center;">��½����������Ŷ</p>
    <form action="#" method="get" style="text-align: center;">
    <input type="button" value="ȷ��" id="button_1" /> <input type="button" value="ȡ��" id="button_2" />
    </form>
    </div>
    <script type="text/javascript">
    <!--
    /**
    * */
    for(var i=1;i<=11;i++)
    {
    eval("var dt_" + i + " = document.getElementById('dt_" + i + "')");
    }
    var mbDIV = document.getElementById("mbDIV");
    var loginDIV = document.getElementById("loginDIV");
    var loginTopDIV = document.getElementById("loginTopDIV");
    document.getElementById("button_1").onclick = function()
    {
    hidden("loginDIV");
    hidden("mbDIV");
    }
    document.getElementById("button_2").onclick = function()
    {
    hidden("loginDIV");
    hidden("mbDIV");
    }
    dt_3.onclick = function()
    {
    loginDIV.style.top = "200px";
    loginDIV.style.left = "300px";
    show("loginDIV");
    show("mbDIV")
    }
    /**
    * */
    loginTopDIV.onmousedown = Down;
    var tHeight,lWidth;
    function Down(e)
    {
    var event = window.event || e;
    tHeight = event.clientY - parseInt(loginDIV.style.top.replace(/px/,""));
    lWidth = event.clientX - parseInt(loginDIV.style.left.replace(/px/,""));
    document.onmousemove = Move;
    document.onmouseup = Up;
    }
    function Move(e) {
    var event = window.event || e;
    var top = event.clientY - tHeight;
    var left = event.clientX - lWidth;
    top = top < 0 ? 0 : top;
    top = top > document.body.offsetHeight - 150 ? document.body.offsetHeight - 150 : top;
    left = left < 0 ? 0 : left;
    left = left > document.body.offsetWidth - 300 ? document.body.offsetWidth - 300 : left;
    loginDIV.style.top = top + "px";
    loginDIV.style.left = left +"px";
    }
    function Up() {
    document.onmousemove = null;
    }
    //-->
    </script>
    </body>
    </html>
  • 相关阅读:
    hdu 5101 Select
    hdu 5100 Chessboard
    cf B. I.O.U.
    cf C. Inna and Dima
    cf B. Inna and Nine
    cf C. Counting Kangaroos is Fun
    Radar Installation 贪心
    spfa模板
    Sequence
    棋盘问题
  • 原文地址:https://www.cnblogs.com/xinzhuangzi/p/4100730.html
Copyright © 2011-2022 走看看