div布局-Jquery 收起左栏、全屏、半透明div遮盖照片、半透明div遮盖全屏弹出窗口

最新推荐文章于 2023-04-24 10:12:48 发布
duyelang
最新推荐文章于 2023-04-24 10:12:48 发布
阅读量2.5k
点赞数
分类专栏： html 文章标签： div布局收起展开左栏全屏半透明div 遮盖
本文链接：https://blog.csdn.net/duyelang/article/details/21721251
版权
html 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
学习笔记，方便以后查阅。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        /***********************************页面布局*********************************/
        body, html {
            margin: 0px;
        }
        #header {
            height: 120px;
            width: 100%;
            position: absolute;
            top: 0;
            background-color: blueviolet;
        }
        #middle {
            position: absolute;
            width: 100%;
            height: auto;
            top: 120px;
            bottom: 30px;
        }
        #m_left {
            width: 250px;
            float: left;
            height: 100%;
            background-color: #808080;
        }
        #m_right {
            width: 250px;
            height: 100%;
            float: right;
            background-color: #808080;
        }
        #m_center {
            height: 100%;
            margin: auto;
            overflow: hidden;
            background-color: #ffd800;
        }
        #footer {
            height: 30px;
            width: 100%;
            position: absolute;
            bottom: 0;
            background-color: aqua;
        }
        /*以上是布局页头、页尾还有中间部分。页头页尾固定高度，中间高度自由伸缩。中间部分又分为三列，左右两列宽度固定，中间一列宽度自由伸缩*/
        /******************************************收起右栏、显示右栏***************************************/
        /*收起左栏、显示左栏*/
        #ShrinkLeftColumn {
            background: url(images/mapview.png) no-repeat -7px -9px;
            cursor: pointer;
            width: 16px;
            height: 72px;
            overflow: hidden;
            left: 250px;
            top: 50%;
            position: absolute;
            z-index: 9997;
        }
        .gray_right, .gray_left {
            width: 8px;
            height: 15px;
            position: absolute;
            top: 28px;
            left: 5px;
        }
        .gray_right {
            /*灰色  箭头向右*/
            background: url(images/mapview.png) no-repeat -37px -47px;
        }
        .gray_left {
            /*灰色  箭头向左*/
            background: url(images/mapview.png) no-repeat -37px -4px;
        }
        .green_right {
            /*绿色  箭头向右*/
            background: url(images/mapview.png) no-repeat -37px -68px;
        }
        .green_left {
            /*绿色 箭头向左*/
            background: url(images/mapview.png) no-repeat -37px -25px;
        }
        /******************************鼠标移动到照片弹出div遮盖照片**************************/
        #imgContainer {
            width: 200px;
            height: 200px;
            position: relative;
            overflow: hidden;
        }
            #imgContainer .desc {
                width: 170px;
                height: 180px;
                padding: 20px 0 0 30px;
                background: #000;
                opacity: 0.65;
                -moz-opacity: 0.65;
                position: absolute;
                bottom: -200px;
            }
                #imgContainer .desc div {
                    color: #fff;
                }
        /****************************************div遮盖全屏****************************************/
        #cover {
            display:none;
        }
        #CoverFullScreen {
            background-color: #000000;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            opacity: 0.65;
            -moz-opacity: 0.65;
            filter: alpha(opacity=65);
            z-index: 9998;
        }
        #CoverFullScreen_child {
            width: 300px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -100px;
            z-index: 99999;            
            border: 10px solid red;
            background-color: white;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //***************************************控制左栏是否显示****************************
            $("#ShrinkLeftColumn").mouseover(function () {
                if ($("#m_left").is(":visible")) {
                    $(this).children().addClass('green_left');
                }
                else {
                    $(this).children().addClass('green_right');
                }
            });
            $("#ShrinkLeftColumn").mouseout(function () {
                if ($("#m_left").is(":visible")) {
                    $(this).children().removeClass('green_left');
                }
                else {
                    $(this).children().removeClass('green_right');
                }
            });
            $("#ShrinkLeftColumn").click(function () {
                if ($("#m_left").is(":visible")) {
                    $("#m_left").hide();
                    document.getElementById("ShrinkLeftColumn").title = "展开左栏";
                    $("#m_center").css("width", "auto");
                    $("#ShrinkLeftColumn").css("left", "0px");
                    $(this).children().removeClass();
                    $(this).children().addClass('gray_right');
                }
                else {
                    $("#m_left").show();
                    $("#m_center").css("width", "auto");
                    $("#ShrinkLeftColumn").css("left", "250px");
                    document.getElementById("ShrinkLeftColumn").title = "收起左栏";
                    $(this).children().removeClass();
                    $(this).children().addClass('gray_left');
                }
            });
            //*******************************鼠标移动到照片弹出div遮盖照片*******************************
            $("#imgContainer").hover(
          function () {
              $(this).find(".desc").stop().delay(50).animate({ "bottom": 0 }, 300)
          },
          function () {
              $(this).find(".desc").stop().animate({ "bottom": -200 }, 300)
          }
            )
        });
        function ExitOrFullScreen() {
            var e = document.getElementById('btnAllScreen');
            var text = e.value;
            if (text === "全屏") {
                e.value = "退出全屏";
                $("#m_left").hide();
                $("#m_right").hide();
                $("#header").hide();
                $("#footer").hide();
                $("#ShrinkLeftColumn").hide();
                $("#middle").css("top", 0);
                $("#middle").css("bottom", 0);
            }
            else if (text === "退出全屏") {
                e.value = "全屏";
                $("#m_left").show();
                $("#m_right").show();
                $("#header").show();
                $("#footer").show();
                $("#ShrinkLeftColumn").show();
                $("#middle").css("top", 120);
                $("#middle").css("bottom", 30);
            }
        }
    </script>
</head>
<body>
    <div id="cover">
        <div id="CoverFullScreen">
        </div>
        <div id="CoverFullScreen_child">
            <table>
                <tr>
                    <td>用户名：</td>
                    <td>
                        <input id="Text1" type="text" /></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td>
                        <input id="Text2" type="text" /></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input id="Submit1" type="submit" value="submit" />
                        <input id="btnCloseCover" type="button" value="关 闭" οnclick="document.getElementById('cover').style.display = 'none';" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div id="header">
    </div>
    <div id="middle">
        <div id="ShrinkLeftColumn" title="收起左栏">
            <div class="gray_left"></div>
        </div>
        <div id="m_left">
        </div>
        <div id="m_right">
        </div>
        <div id="m_center">
            <input id="btnAllScreen" type="button" value="全屏" οnclick="ExitOrFullScreen();" />
            <input id="btnLogin" type="button" value="登录" οnclick="document.getElementById('cover').style.display = 'block';" />
            <div id="imgContainer">
                <img src="images/1.jpg" alt="" />
                <div class="desc">
                    <div>
                        图片详细信息
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
    </div>
</body>
</html>
duyelang
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div布局-Jquery 收起左栏、全屏、半透明div遮盖照片、半透明div遮盖全屏弹出窗口

学习笔记，方便以后查阅。http://www.w3.org/1999/xhtml"> body, html { margin: 0px; } #header { height: 120px; width: 100%;
复制链接

扫一扫
专栏目录