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

最新推荐文章于 2025-04-20 16:08:52 发布
原创 最新推荐文章于 2025-04-20 16:08:52 发布
· 7.5k 阅读 · 10 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

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

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

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

可参考，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
            }
最低0.47元/天 解锁文章
jquery制作的web qq用户界面
guanning0109的专栏
07-23 1781
jquery ui仿腾讯web qq界面desktop酷炫特效 Powered by jsfoot.com 乐视网 Pixlr 豆瓣FIM 酷我音乐盒 起点中文 互动百科 千千音乐 添加 主妇美食 芒果旅游 淘宝网 情书
jquery-WebQQ桌面布局
11-02
而“WebQQ桌面布局”则是将这种体验进一步优化，通过特定的前端技术实现更接近于桌面应用的视觉和交互设计。 这个插件的核心是jQuery，一个广泛使用的JavaScript库，简化了HTML元素的选择、操作和事件处理。jQuery...
分享Jquery-UI实现Web桌面系统——jWebOS
05-31
本示例利用了Jquery-UI实现Web桌面系统jWebOS，左侧菜单和桌面菜单的链接都是动态设置。整体效果非常棒。大家可以用于自己的网站建设。 建议开发童鞋使用跨平台开发工具——统一开发环境UDE来进行查看、调试、开发哦~~统一开发环境是一款HTML5跨平台一站式应用开发、调试和部署工具， 它支持HTML5跨平台开发，原有Java跨平台插件支持Android、Symbian、Kjava的跨平台和原生开发，已覆盖Android、iOS、WP、Symbian、Kjava操作系统平台。
用jquery写的一个PC端桌面应用管理界面
那个西瓜有点甜
08-30 1618
支持拖拽移动，桌面文件夹管理（拖拽应用到另一个应用上面，会自动生成文件夹），桌面任务栏管理，桌面应用管理，桌面菜单栏.(资源下载地址在最下面) $.fn.extend({ animateCss: function (animationName, callback) { var animationEnd = (function (el...
Web前端：常用的布局属性
最新发布
2401_87008233的博客
04-20 380
web前端常用的布局方式 ：float浮动布局 ​position 定位布局 ​flex 弹性布局（display） ​table 表格布局（弃用）
jQuery-DesktopGrid
冰冻火山
10-05 2606
jQueryDesktopGrid jQuery desktop, jQuery desktop grid, jQuery mac os x, jQuery system. to make an beautiful desktop like os system to enhance user experience. clone the project, then just run the i
Jquery仿WebQQ桌面程序特效~~附源码哦
tangfenjuan的博客
05-27 349
此作品是一款非常给力的仿WebQQ桌面程序Jquery特效，使用非常简单，主题切换只要改变body的背景图片即可，整体UI样式也改变了，看起来非常简洁大气。大家可以直接应用，功能图片可以自定义。   建议开发童鞋使用跨平台开发工具——统一开发环境UDE来进行查看、调试、开发哦~~它是一款HTML5跨平台一站式应用开发、调试和部署工具， 支持HTML5跨平台开发，原Java跨平台插件支持And...
仿WebQQ桌面应用：jQuery UI打造动感界面
jQuery桌面应用框架是一种用于构建具有桌面应用特性的Web应用程序的前端技术方案。这类框架通常集成了桌面应用的视觉和交互元素，比如模拟窗口拖拽、悬浮提示、最小化、最大化、关闭等界面行为，使得Web应用的用户...
Jquery仿WebQQ桌面程序特效实现方法与自定义功能
- **Web桌面**: 这里指的Web桌面是指Web应用程序的界面，它模拟了传统桌面操作系统的用户界面，使用户可以在浏览器中体验类似桌面的应用程序。WebQQ桌面程序就是一种Web桌面应用，它通过Web技术提供即时通讯服务。 ...
实现仿WebQQ桌面程序特效的Jquery方法
首先，标题中提到的“Jquery仿WebQQ桌面程序特效”，涉及到的核心技术是Jquery和WebQQ。Jquery是一个快速、小巧且功能丰富的JavaScript库。它通过减少HTML文档遍历、事件处理、动画和Ajax交互的代码量，简化了这些...
jQuery UI仿webqq桌面系统WebOS界面操作
04-27
jQuery UI仿webqq桌面系统WebOS界面操作 jQuery UI仿webqq桌面系统WebOS界面操作
漂亮的jQuery电脑桌面界面特效
09-20
漂亮的jQuery电脑桌面界面特效.一起学习，一起交流。。
一款web桌面版操作系统
07-10
点击上传资源即表示您确认该资源不违反资源分享的使用条款，并且您拥有该资源的所有版权或者上传资源的授权 .
jQuery-Desktop桌面效果
06-27
jQuery-Desktop桌面效果，jQuery开发的前台桌面效果，效果非常好，代码非常少，完全可以自己根据需求定制出最终的系统。
JavaScript编写的简易web桌面系统
06-30
WEB桌面系统项目文档 项目简介: 本项目构建了一个WEB桌面系统。该系统由用户注册、登陆、注销以及倒记时器、模拟钢琴和宠物系统等5个组件组成，并具有更改页面样式、时钟显示、组件自由拖放等功能。整个页面在接受用户操作时不发生刷新和跳转，所有脚本函数和CSS都写在HTML页面文件之外。 项目交付物: 1、 HTML页面： W-desktop.html 2、 JavaScript脚本： p2-core.js 3、 CSS样式单： all.css 4、 项目文档： EyesOnMe.doc 组件详细说明:1.用户登陆与注销2.用户注册 3.界面管理4.组件在页面内的自由拖放5.倒记时器 6.模拟钢琴7.实现弹奏时产生对应的声音8.宠物系统
史上最炫的web桌面管理系统 开源 Kodexplorer 2.0
06-27
Kodexplorer 2.0 全新问世，基于 web 的文件管理 2.0 版本隆重发布！ 基本上重写优化了所有代码。模块结构化，更好的体验。0 g& o8 D1 [, @* j+ S1 g8 N6 M --------------------------------------------------- 1.支持多用户、权限管理（用户组——给组分配权限——组里添加用户）0 I: N* a! g" F3 d; r# f6 M- R 2.支持多语言：简体中文、繁体、英语…… 3.文本编辑全面优化：多光标编辑、代码自动提示、实时预览…堪比本地的sublime, c9 `9 t8 k) g9 D8 O 4.应用商店，可以自定义应用（链接方式和js api方式提供）% _" Y# F, k5 j; G: j 5.极致的上传体验，文件拖拽、文件夹拖拽……& w/ Z3 k2 U. I9 |8 t 6.全面的文件预览、编辑等操作(支持服务器目录、非服务器路径)
源码分享：Jquery-UI实现Web桌面系统——jWebOS
tangfenjuan的博客
05-31 932
本示例利用了Jquery-UI实现Web桌面系统jWebOS，左侧菜单和桌面菜单的链接都是动态设置。整体效果非常棒。大家可以用于自己的网站建设。   建议开发童鞋使用跨平台开发工具——统一开发环境UDE来进行查看、调试、开发哦~~它是一款HTML5跨平台一站式应用开发、调试和部署工具， 支持HTML5跨平台开发，原Java跨平台插件支持Android/Symbian/Kjava的跨平台和原生...
jQuery Desktop UI – ExtJS Web界面门户
04-19 258
Web浏览器的桌面 我一直想尝试ExtJS的，而现在，终于一展身手，并创建一个基于浏览器的桌面模拟用户界面的时间。 ExtJS的framwork提供这种无缝和这么多！ 现场演示 特点我已经加入： 桌面用户界面 谷歌地图API示例 网格示例 标签示例 手风琴例 边境布局范例 这些选项都可以作为桌面项目，只需双击打开它们，你通常会。 特点我想补充（当我得到的时间）： 自定...
基于jQuery的Desktop【仿QQ WebOS 应用】
weixin_33951761的博客
06-06 267
随着企业信息化的推进，企业信息系统越来越多，在没有SSO的前提下，造成登陆url暴增，往往每个系统都需要单独的登陆，这给用户造成了很多不必要的麻烦，用户体验差，为此Portal应运而生了，解决企业的门户问题，时下比较牛逼的Portal主要是IBM的，集成单点登陆应该算是比较牢靠的技术，但IBM投入成本较高，而且开发出来的东西美观度不够，需要耗费大量的人力财力。 为构造企业特色的Portal，参考...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值