桌面系统（web前端）jQuery制作Web桌面系统界面类似WebQQ桌面布局

最新推荐文章于 2025-10-31 17:00:11 发布

原创

最新推荐文章于 2025-10-31 17:00:11 发布 · 7.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#html #web前端 #界面 #布局 #桌面布局

本文介绍如何利用jQuery创建类似WebQQ桌面布局的Web系统界面。内容包括HTML结构、CSS样式和JavaScript交互，实现图标双击弹出窗口、窗口间切换、缩放及缩略图展示等功能。

源码不是我写的，但是我在基础上修改了一些内容。

可参考，http://www.xwcms.net/webAnnexImages/fileAnnex/20140220/82693/index.html

jQuery制作Web桌面系统界面类似WebQQ桌面布局

js有些修改。

左边是图标，双击可弹出弹框，弹框之间可进行切换，弹框可缩小放大，右下角的小图标内容是缩略图。

1，HTML、

<body>
        <iframe src="/header" id="header"></iframe>
        <!--<a href="#" class="powered_by">Powered by jWebOS</a>-->
        <div class="bodydiv">


            <ul class="deskIcon">
                <li class="desktop_icon" id="win5" path="/dataReduction">
                    <span class="icon"><img src="icon/zl.png"/></span>
                    <div class="text">数据整理
                        <div class="right_cron"></div>
                    </div>
                </li>
                <li class="desktop_icon" id="win6" path="/dataIngestWeb">
                    <span class="icon"><img src="icon/sq.png"/></span>
                    <div class="text">数据摄取
                        <div class="right_cron"></div>
                    </div>
                </li>
                <li class="desktop_icon" id="win7" path="/todatamana">
                    <span class="icon"><img src="icon/gl.png"/></span>
                    <div class="text">数据管理
                        <div class="right_cron"></div>
                    </div>
                </li>
                <li class="desktop_icon" id="win8" path="/dataUse">
                    <span class="icon"><img src="icon/ly.png"/></span>
                    <div class="text">数据利用
                        <div class="right_cron"></div>
                    </div>
                </li>
                <li class="desktop_icon" id="win9" path="/maintain">
                    <span class="icon"><img src="icon/wh.png"/></span>
                    <div class="text">模板维护
                        <div class="right_cron"></div>
                    </div>
                </li>
                <!--            <li class="desktop_icon" id="win10" path="/metaMaintain">
                                <span class="icon"><img src="icon/wh.png"/></span>
                                <div class="text">元数据维护
                                    <div class="right_cron"></div>
                                </div>
                            </li>-->

                <!--炫酷特效-->
                <!--        <canvas id="canv" width="100%" height="100%"></canvas>
                        <script src="./js/canvas.js" type="text/javascript"></script>-->
            </ul>
            <div id="taskBar">
                <div id="leftBtn">
                    <a href="#" class="upBtn"></a>
                </div>
                <div id="rightBtn">
                    <a href="#" class="downBtn"></a>
                </div>
                <div id="task_lb_wrap">
                    <div id="task_lb"></div>
                </div>
            </div>

            <div class="navigation_circle" >
                <img src="images/nav.png" id="start0"/>
            </div>
            <div class=" nav_bigbtn" >
                <img src="images/nav.png" id='start1'/>
            </div>
            <!--浮动框-->
            <div id="dvDock">
                <div class="dvDockStartOuter" title="DRMP触点" tabindex="0" hidefocus="true">
                    <div class="navigation_btn" >
                        <img src="images/nav.png" id='start'/>
                    </div>
                </div>
                <div class="float_box sb0">
                    <!--<img src="images/zhankai.png"  class="zhankai"/>-->
                    <ul id="navigation">
                        <li class="desktop_icon" id="sm5" path="/dataReduction">
                            <div class="libox">
                                <span class="small_icon"><img src="icon/zl.png"/></span>
                                <span class="text">数据整理</span>
                            </div>
                        </li>
                        <li class="desktop_icon"  id="sm6" path="/dataIngestWeb">
                            <div class="libox">
                                <span class="small_icon"><img src="icon/sq.png"/></span>
                                <span class="text">数据摄取</span>
                            </div>
                        </li>
                        <li class="desktop_icon"  id="sm7" path="/todatamana">
                            <div class="libox">
                                <span class="small_icon"><img src="icon/gl.png"/></span>
                                <span class="text">数据管理</span></div>
                        </li>
                        <li  class="desktop_icon"  id="sm8" path="/dataList">
                            <div class="libox">
                                <span class="small_icon"><img src="icon/ly.png"/></span>
                                <span class="text">数据利用</span></div>
                        </li>
                        <li  class="desktop_icon"  id="sm9" path="/maintain">
                            <div class="libox">
                                <span class="small_icon"><img src="icon/wh.png"/></span>
                                <span class="text">模板维护</span></div>
                        </li>
                      
                    </ul>

                </div>
                <div class="mb0"></div>

            </div>
           
        </div>
    </body>

2.css

<style type="text/css">


            /*重置样式*/

            body,
            div,
            dl,
            dt,
            dd,
            ul,
            ol,
            li,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            pre,
            form,
            fieldset,
            input,
            textarea,
            p,
            blockquote,
            th,
            td {
                margin: 0;
                padding: 0;
            }

            table {
                border-collapse: collapse;
                border-spacing: 0;
            }

            fieldset,
            img {
                border: 0;
            }

            address,
            caption,
            cite,
            code,
            dfn,
            em,
            strong,
            th,
            var {
                font-style: normal;
                font-weight: normal;
            }

            ol,
            ul,
            li {
                list-style: none;
            }

            caption,
            th {
                text-align: left;
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font-size: 100%;
                font-weight: normal;
            }

            q:before,
            q:after {
                content: ”;
            }

            abbr,
            acronym {
                border: 0;
            }

            * {
                margin: 0;
                padding: 0
            }
            /*页面基础样式*/

            html {
                /*overflow: hidden;*/
                width: 100%;
                height: calc(100%);
                  
            }

            body {
                width: 100%;
                height: 100%;
                font-size: 12px;
                font-family: "微软雅黑";
                font-weight: lighter;
                margin: 0;
                padding: 0;
               
                /*background: #484848 url(images/bg.jpg) no-repeat center center;*/
/*                background-size: 100%;*/
                 min-width: 1300px;
            }
            .bodydiv{
                width: 100%;
                height:calc(100% - 70px);
                background: #484848 url(images/bg.jpg) no-repeat 100% 100%;
                background-size: 100% 100%;
                position: absolute;
                top: 70px;
                min-width: 1300px;
                min-height: 500px;
            }

            a {
                font-size: 12px;
            }

            a:link {
                text-decoration: none;
                color: #FFF;
            }

            a:visited {
                text-decoration: none;
                color: #FFF;
            }

            a:hover {
                text-decoration: none;
                color: #FFF;
            }

            a:active {
                text-decoration: none;
                color: #FFF;
            }

            .corner {
                /*只在支持css3的高级浏览器起作用*/
                /*-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;*/
                -moz-box-shadow: 2px 2px 8px #444;
                -webkit-box-shadow: 2px 2px 8px #444;
                box-shadow: 2px 2px 8px #444;
            }

            .loading {
                background: url(images/loading.gif) no-repeat center center
            }
            /*界面布局样式*/

            .powered_by {
                width: 160px;
                height: 25px;
                line-height: 25px;
                background: url(images/powered-by.png) no-repeat left center;
                color: #CCC;
                text-indent: 26px;
                display: block;
                outline: none;
                position: absolute;
                right: 20px;
                bottom: 60px;
            }
            /*任务栏样式*/

            #taskBar {
                width: 100%;
                height: 40px;
                line-height: 40px;
                position: absolute;
                right: 0;
                bottom: 0;
            }

            #leftBtn {
                width: 100px;
                height: 40px;
                float: left;
                display: none;
            }

            #rightBtn {
                width: 100px;
                height: 40px;
                float: right;
                display: none;
            }

            #leftBtn a,
            #rightBtn a {
                display: block;
                width: 100px;
                height: 40px;
                outline: none;
                background-image: url(images/lr_btn.png);
                background-repeat: no-repeat;
            }

            #leftBtn a {
                background-position: left top;
            }

            #rightBtn a {
                background-position: right top;
            }

            #leftBtn a:hover {
                background-position: left bottom
            }

            #rightBtn a:hover {
                background-position: right bottom
            }

            #task_lb_wrap {
                height: 40px;
                line-height: 40px;
                overflow: hidden;
                position: relative;
            }

            #task_lb {
                width: auto;
                height: auto;
                position: absolute;
                top: 0;
                right: 0;
            }

            #task_lb a {
                display: inline-block;
                outline: none;
                width: 100px;
                height: 40px;
                background-image: url(images/taskHdBtn.png);
                background-repeat: no-repeat;
                text-align: center;
                line-height: 40px;
                float: right
            }

            #task_lb .defaultTab {
                background-position: right top;
                color: #ccc
            }

            #task_lb .defaultTab:hover {
                background-position: right bottom;
            }

            #task_lb .selectTab {
                background-position: left top;
                color: #FFF
            }

            #task_lb .selectTab:hover {
                background-position: left bottom
            }

            #shizhong_btn {
                background: url(images/timer.png) no-repeat center center
            }

            #weather_btn {
                background: url(images/wheather.png) no-repeat center center
            }