HTML实现仿Windows桌面主题特效的实现

bobo7515

1. 在线演示地址：<a href="https://haiyong.site/win/" target="_blank">https://haiyong.site/win/</a>

复制代码

✨ 项目基本结构

目录结构如下：

1. ├── jsLib
   
2. │   ├── jquery.winResize.js
   
3. │   ├── jquery-1.6.2.js
   
4. │   ├── jquery-1.6.2.min.js
   
5. │   ├── jquery-ui-1.8.16.custom.min.js
   
6. │   ├── myLib.js
   
7. │   ├── external
   
8. │   ├── jquery-smartMenu
   
9. │   ├── themes
   
10. │   └── ui
    
11. ├── icon
    
12. ├── images
    
13. ├── wallpapers
    
14. └── index.html

复制代码

HTML 代码
HTML 主要代码：

1. <a href="https://haiyong.site" class="powered_by">Powered by haiyong.site 注意：双击桌面应用即可点开</a>
   
2. <ul id="deskIcon">
   
3.   <li class="desktop_icon" id="win11" path="https://haiyong.site/"> <span class="icon"><img src="icon/icon14.png"/></span>
   
4.     <div class="text">海拥
   
5.       <div class="right_cron"></div>
   
6.     </div>
   
7.   </li>
   
8. <li class="desktop_icon" id="win11" path="https://haiyong.blog.csdn.net/"> <span class="icon"><img src="icon/csdn.png"/></span>
   
9.    <div class="text">CSDN
   
10.      <div class="right_cron"></div>
    
11.    </div>
    
12. </li>
    
13.   <li class="desktop_icon" id="win11" path="https://juejin.cn/user/2040341402229751"> <span class="icon"><img src="icon/juejin.png"/></span>
    
14.     <div class="text">掘金
    
15.       <div class="right_cron"></div>
    
16.     </div>
    
17.   </li>  
    
18.   <li class="desktop_icon" id="win11" path="https://space.bilibili.com/63551025"> <span class="icon"><img src="icon/bilibili.png"/></span>
    
19.     <div class="text">bilibili
    
20.       <div class="right_cron"></div>
    
21.     </div>
    
22.   </li>  
    
23. </ul>
    
24. <div id="taskBar">
    
25.   <div id="leftBtn"><a href="#" class="upBtn"></a></div>
    
26.   <div id="rightBtn"><a href="#" class="downBtn"></a> </div>
    
27.   <div id="task_lb_wrap">
    
28.     <div id="task_lb"></div>
    
29.   </div>
    
30. </div>
    
31. <div id="lr_bar">
    
32.   <ul id="default_app">
    
33.     <li id="app0"><img src="icon/icon1.png" title="海拥" path="https://haiyong.site/"/></li>
    
34.     <li  id="app2"><img src="icon/icon0.png" title="工具" path="https://haiyong.site/tools"/></li>
    
35.     <li id="app3"><img src="icon/icon2.png" title="交流群" path="https://app.yinxiang.com/fx/8aa8eb1b-7d45-4793-a160-b990d9da2e75"/></li>
    
36.     <li id="app4"> <img src="icon/icon3.png" title="联系作者" path="https://haiyong.site/img/qrcode/weixin.png"/></li>
    
37.     <li id="app1"><img src="icon/icon11.png" title="Jquery学堂" path="http://www.jq22.com/?Jquery.aspx"/></li>
    
38.   </ul>
    
39.   <div id="default_tools"> <span id="showZm_btn" title="显示桌面"></span><span id="shizhong_btn" title="时钟"></span><span id="weather_btn" title="天气"></span> <span id="them_btn" title="主题"></span></div>
    
40.   <div id="start_block"> <a title="开始" id="start_btn"></a>
    
41.     <div id="start_item">
    
42.       <ul class="item admin">
    
43.         <li><span class="adminImg"></span> Admin</li>
    
44.       </ul>
    
45.       <ul class="item">
    
46.         <li><span class="sitting_btn"></span>系统设置</li>
    
47.         <li><span class="help_btn"></span>使用指南 <b></b></li>
    
48.         <li><span class="about_btn"></span>关于我们</li>
    
49.         <li><span class="logout_btn"></span>退出系统</li>
    
50.       </ul>
    
51.     </div>
    
52.   </div>
    
53. </div>
    
54. </div>

复制代码

💛 CSS 代码
CSS主要代码：

1. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
   
2.         margin:0;
   
3.         padding:0;
   
4. }
   
5. table {
   
6.         border-collapse:collapse;
   
7.         border-spacing:0;
   
8. }
   
9. fieldset, img {
   
10.         border:0;
    
11. }
    
12. address, caption, cite, code, dfn, em, strong, th, var {
    
13.         font-style:normal;
    
14.         font-weight:normal;
    
15. }
    
16. ol, ul, li {
    
17.         list-style:none;
    
18. }
    
19. caption, th {
    
20.         text-align:left;
    
21. }
    
22. h1, h2, h3, h4, h5, h6 {
    
23.         font-size:100%;
    
24.         font-weight:normal;
    
25. }
    
26. q:before, q:after {
    
27.         content:”;
    
28. }
    
29. abbr, acronym {
    
30.         border:0;
    
31. }
    
32. * {
    
33.         margin:0;
    
34.         padding:0
    
35. }

复制代码

页面基础样式

1. /*页面基础样式*/
   
2. html {
   
3.         overflow:hidden;
   
4. }
   
5. body {
   
6.         font-size: 12px;
   
7.         background:#06C url(wallpapers/menglong2.jpg) repeat scroll center center;
   
8.         font-family: Tahoma, Geneva, sans-serif;
   
9.         margin:0;
   
10.         padding:0
    
11. }
    
12. a {
    
13.         font-size: 12px;
    
14. }
    
15. a:link {
    
16.         text-decoration: none;
    
17.         color: #FFF;
    
18. }
    
19. a:visited {
    
20.         text-decoration: none;
    
21.         color: #FFF;
    
22. }
    
23. a:hover {
    
24.         text-decoration: none;
    
25.         color: #FFF;
    
26. }
    
27. a:active {
    
28.         text-decoration: none;
    
29.         color: #FFF;
    
30. }
    
31. .corner {/*只在支持css3的高级浏览器起作用*/
    
32.         -moz-border-radius: 5px;
    
33.         -webkit-border-radius: 5px;
    
34.         border-radius: 5px;
    
35.         -moz-box-shadow: 2px 2px 8px #444;
    
36.         -webkit-box-shadow: 2px 2px 8px #444;
    
37.         box-shadow:2px 2px 8px #444;
    
38. }
    
39. .loading {
    
40.         background:url(images/loading.gif) no-repeat center center
    
41. }

复制代码

界面布局样式

1. /*界面布局样式*/
   
2. .powered_by {
   
3.         width:160px;
   
4.         height:25px;
   
5.         line-height:25px;
   
6.         background:url(images/powered-by.png) no-repeat left center;
   
7.         color:#CCC;
   
8.         text-indent:26px;
   
9.         display:block;
   
10.         outline:none;
    
11.         position:absolute;
    
12.         right:20px;
    
13.         bottom:60px;
    
14. }

复制代码

任务栏样式

1. #taskBar {
   
2.         width:100%;
   
3.         height:40px;
   
4.         line-height:40px;
   
5.         position:absolute;
   
6.         right:0;
   
7.         bottom:0;
   
8. }
   
9. #leftBtn {
   
10.         width:100px;
    
11.         height:40px;
    
12.         float:left;
    
13.         display:none;
    
14. }
    
15. #rightBtn {
    
16.         width:100px;
    
17.         height:40px;
    
18.         float:right;
    
19.         display:none;
    
20. }
    
21. #leftBtn a, #rightBtn a {
    
22.         display:block;
    
23.         width:100px;
    
24.         height:40px;
    
25.         outline:none;
    
26.         background-image:url(images/lr_btn.png);
    
27.         background-repeat:no-repeat;
    
28. }
    
29. #leftBtn a {
    
30.         background-position:left top;
    
31. }
    
32. #rightBtn a {
    
33.         background-position:right top;
    
34. }
    
35. #leftBtn a:hover {
    
36.         background-position:left bottom
    
37. }
    
38. #rightBtn a:hover {
    
39.         background-position:right bottom
    
40. }
    
41. #task_lb_wrap {
    
42.         height:40px;
    
43.         line-height:40px;
    
44.         overflow:hidden;
    
45.         position:relative;
    
46. }
    
47. #task_lb {
    
48.         width:auto;
    
49.         height:auto;
    
50.         position:absolute;
    
51.         top:0;
    
52.         right:0;
    
53. }
    
54. #task_lb a {
    
55.         display:inline-block;
    
56.         outline:none;
    
57.         width:100px;
    
58.         height:40px;
    
59.         background-image:url(images/taskHdBtn.png);
    
60.         background-repeat:no-repeat;
    
61.         text-align:center;
    
62.         line-height:40px;
    
63.         float:right
    
64. }
    
65. #task_lb .defaultTab {
    
66.         background-position:right top;
    
67.         color:#ccc
    
68. }
    
69. #task_lb .defaultTab:hover {
    
70.         background-position:right bottom;
    
71. }
    
72. #task_lb .selectTab {
    
73.         background-position:left top;
    
74.         color:#FFF
    
75. }
    
76. #task_lb .selectTab:hover {
    
77.         background-position:left bottom
    
78. }
    
79. #shizhong_btn {
    
80.         background:url(images/timer.png) no-repeat center center
    
81. }
    
82. #weather_btn {
    
83.         background:url(images/wheather.png) no-repeat center center
    
84. }
    
85. #sound_btn {
    
86.         background:url(images/sound_open.png) no-repeat center center
    
87. }
    
88. #showZm_btn {
    
89.         background:url(images/show-desktop.png) no-repeat center center
    
90. }
    
91. #them_btn {
    
92.         background:url(images/skin.png) no-repeat center center
    
93. }

复制代码

侧边浮动栏

1. #lr_bar {
   
2.         width:73px;
   
3.         height:auto;
   
4.         position:absolute;
   
5.         left:0;
   
6.         top:30px;
   
7.         background:url(images/dock_top.png) repeat-y left top;
   
8.         z-index:90;
   
9.         -moz-box-shadow: 0px 3px 15px #444;
   
10.         -webkit-box-shadow: 0px 3px 15px #444;
    
11.         box-shadow:0px 3px 15px #444;
    
12.         padding-top:5px;
    
13. }

复制代码

开始按钮样式

1. #start_block {
   
2.         width:73px;
   
3.         height:56px;
   
4.         position:absolute;
   
5.         left:0;
   
6.         bottom:-56px;
   
7.         background:url(images/dock_b.png) no-repeat left bottom;
   
8.         -moz-box-shadow: 0px 5px 15px #444;
   
9.         -webkit-box-shadow: 0px 5px 15px #444;
   
10.         box-shadow:0px 5px 15px #444;
    
11. }
    
12. #start_btn {
    
13.         display:block;
    
14.         width:48px;
    
15.         height:48px;
    
16.         background:url(images/start-btn.png) no-repeat center bottom;
    
17.         margin:4px auto 0 auto;
    
18.         outline:none;
    
19.         z-index:501;
    
20.         cursor:pointer;
    
21. }
    
22. #start_btn:hover {
    
23.         background-position:center top
    
24. }

复制代码

开始菜单样式

1. #start_item {
   
2.         width:180px;
   
3.         height:auto;
   
4.         padding:5px 0;
   
5.         background: url(images/start_item_bg.png) repeat;
   
6.         position:absolute;
   
7.         z-index:500;
   
8.         left:75px;
   
9.         bottom:0px;
   
10.         display:none;
    
11.         -moz-border-radius: 5px;
    
12.         -webkit-border-radius: 5px;
    
13.         border-radius: 5px;
    
14.         -moz-box-shadow: 2px 2px 5px #444;
    
15.         -webkit-box-shadow: 2px 2px 5px #444;
    
16.         box-shadow:2px 2px 5px #444;
    
17. }
    
18. #start_item .item {
    
19.         width:100%;
    
20.         height:auto;
    
21.         border-top:1px solid #999
    
22. }
    
23. #start_item .item li {
    
24.         width:98%;
    
25.         height:24px;
    
26.         overflow:hidden;
    
27.         zoom:-1;
    
28.         padding:6px 0;
    
29.         line-height:24px;
    
30.         margin:0 auto;
    
31.         color:#FFF;
    
32. }
    
33. #start_item .item li:hover {
    
34.         background:url(images/start_item_over.png) repeat-x left bottom;
    
35.         cursor:pointer
    
36. }
    
37. #start_item .item li span {
    
38.         display:inline-block;
    
39.         width:24px;
    
40.         height:24px;
    
41.         background-image:url(images/start_itembtn.png);
    
42.         background-repeat:no-repeat;
    
43.         margin:0 10px;
    
44.         float:left;
    
45. }
    
46. #start_item .item li b {
    
47.         width:10px;
    
48.         height:24px;
    
49.         background:url(images/item-child.png) no-repeat center center;
    
50.         display:inline-block;
    
51.         float:right;
    
52.         margin-right:10px;
    
53. }
    
54. #start_item .sitting_btn {
    
55.         background-position:left -140px;
    
56. }
    
57. #start_item .help_btn {
    
58.         background-position:left -44px;
    
59. }
    
60. #start_item .about_btn {
    
61.         background-position:left -164px;
    
62. }
    
63. #start_item .logout_btn {
    
64.         background-position:left -20px;
    
65. }
    
66. #start_item .admin {
    
67.         border-bottom:1px solid #444;
    
68.         padding:5px 0;
    
69.         border-top:none;
    
70. }
    
71. #start_item .item li .adminImg {
    
72.         border:1px solid #E0E0E0;
    
73.         background-position:left -92px;
    
74.         background-color:#FFF;
    
75. }

复制代码

默认小工具

1. #default_tools {
   
2.         width:71px;
   
3.         height:auto;
   
4.         overflow:hidden;
   
5.         zoom:-1;
   
6.         padding:5px 0;
   
7.         border-top:1px solid #555;
   
8.         margin:0 auto;
   
9. }
   
10. #default_tools span {
    
11.         width:30px;
    
12.         height:30px;
    
13.         display:inline-block;
    
14.         margin:0 0 0 3px;
    
15.         cursor:pointer;
    
16.         float:left;
    
17. }

复制代码

默认应用程序

1. #default_app {
   
2.         width:73px;
   
3.         height:auto;
   
4.         padding:5px 0;
   
5.         position:relative;
   
6. }
   
7. #default_app li {
   
8.         width:48px;
   
9.         height:48px;
   
10.         overflow:hidden;
    
11.         margin:3px auto;
    
12.         padding:6px;
    
13. }
    
14. #default_app li img {
    
15.         width:48px;
    
16.         height:48px;
    
17.         cursor:pointer;
    
18. }
    
19. #default_app .btnOver {
    
20.         background:url(images/default_appbtn_bg.png) no-repeat center center
    
21. }

复制代码

重写右键菜单样式

1. .smart_menu_box .smart_menu_a {
   
2.         color:#333
   
3. }
   
4. .smart_menu_box .smart_menu_li_separate {
   
5.         border-bottom:1px solid #d6d5d5;
   
6. }

复制代码

窗口样式

1. .windows {
   
2.         min-width:240px;
   
3.         min-height:200px;
   
4.         width:700px;
   
5.         height:560px;
   
6.         position:absolute;
   
7.         display:none;
   
8.         background-color:#E0E0E0;
   
9. }
   
10. .win_title {
    
11.         width:100%;
    
12.         height:26px;
    
13.         line-height:26px;
    
14.         background:#E0E0E0 url(images/titlebar_bg_cur.png) repeat-x left center;
    
15.         -moz-border-radius: 5px;
    
16.         -webkit-border-radius: 5px;
    
17.         border-radius: 5px;
    
18. }
    
19. .win_title b {
    
20.         color:#333;
    
21.         margin-left:10px;
    
22. }
    
23. .win_title .win_btnblock {
    
24.         width:auto;
    
25.         padding:0 5px;
    
26.         float:right;
    
27.         height:17px;
    
28.         margin:4px 3px 0 0;
    
29. }
    
30. .win_title .win_btnblock a {
    
31.         display:inline-block;
    
32.         width:26px;
    
33.         height:17px;
    
34.         background-image:url(images/windowBtn.png);
    
35.         background-repeat:no-repeat;
    
36.         float:left;
    
37.         margin:0 1px;
    
38.         outline:none;
    
39. }
    
40. .winMaximize {
    
41.         background-position:right bottom;
    
42. }
    
43. .winMaximize:hover {
    
44.         background-position:right top;
    
45. }
    
46. .winHyimize {
    
47.         background-position:-26px bottom;
    
48. }
    
49. .winHyimize:hover {
    
50.         background-position:-26px top;
    
51. }
    
52. .winClose {
    
53.         background-position:-52px top;
    
54. }
    
55. .winClose:hover {
    
56.         background-position:-52px bottom;
    
57. }
    
58. .winMinimize {
    
59.         background-position:left bottom;
    
60. }
    
61. .winMinimize:hover {
    
62.         background-position:left top;
    
63. }
    
64. .winframe {
    
65.         width:100%;
    
66.         height:auto;
    
67.         margin:0 0 0 3px;
    
68.         padding:0
    
69. }

复制代码

桌面图标

1. #deskIcon {
   
2.         width:100%;
   
3.         height:auto;
   
4.         overflow:hidden;
   
5.         zoom:-1;
   
6.         position:relative;
   
7. }
   
8. .desktop_icon {
   
9.         width:86px;
   
10.         height:88px;
    
11.         cursor:pointer;
    
12.         margin-left:-1000px;
    
13.         text-align:center;
    
14. }
    
15. .desktop_icon span {
    
16.         display:block;
    
17. }
    
18. .desktop_icon .icon {
    
19.         width:50px;
    
20.         height:50px;
    
21.         margin:5px auto;
    
22. }
    
23. .desktop_icon .icon img {
    
24.         width:50px;
    
25.         height:50px;
    
26. }
    
27. .desktop_icon .text {
    
28.         display:inline-block;
    
29.         width:auto;
    
30.         height:22px;
    
31.         line-height:22px;
    
32.         text-align:center;
    
33.         color:#fff;
    
34.         background:url(images/iconTextbg.png) no-repeat left center;
    
35.         position:relative;
    
36.         padding-left:10px;
    
37.         margin-right:10px;
    
38. }
    
39. .desktop_icon .right_cron {
    
40.         width:10px;
    
41.         height:22px;
    
42.         position:absolute;
    
43.         right:-10px;
    
44.         top:0;
    
45.         background:url(images/iconTextbg_right.png) left center no-repeat;
    
46. }
    
47. .desktop_icon_over {
    
48.         background:url(images/icon_over.png) no-repeat center center;
    
49. }

复制代码

💙 JS 代码
JS代码较多这里只展示部分JS代码，完整源码可在文末获取

1. //声明desktop空间,封装相关操作
   
2. myLib.NS("desktop");
   
3. myLib.desktop={
   
4.         winWH:function(){
   
5.                 $('body').data('winWh',{'w':$(window).width(),'h':$(window).height()});
   
6.         },
   
7.         desktopPanel:function(){
   
8.                 $('body').data('panel',{
   
9.                                            'taskBar':{
   
10.                                            '_this':$('#taskBar'),
    
11.                                            'task_lb':$('#task_lb')
    
12.                                                                                 },
    
13.                                            'lrBar':{
    
14.                                            '_this':$('#lr_bar'),          
    
15.                                            'default_app':$('#default_app'),
    
16.                                        'start_block':$('#start_block'),
    
17.                                        'start_btn':$('#start_btn'),
    
18.                                            'start_item':$('#start_item'),
    
19.                                            'default_tools':$('#default_tools')
    
20.                                                         },                               
    
21.                                                 'deskIcon':{
    
22.                                                         '_this':$('#deskIcon'),
    
23.                                                         'icon':$('li.desktop_icon')
    
24.                                                         },
    
25.                                                 'powered_by':$('a.powered_by')
    
26.                                                 });
    
27.                 },
    
28.         getMydata:function(){
    
29.                 return $('body').data();
    
30.                 },
    
31.         mouseXY:function(){
    
32.                 var mouseXY=[];
    
33.                 $(document).bind('mousemove',function(e){
    
34.                         mouseXY[0]=e.pageX;
    
35.                         mouseXY[1]=e.pageY;
    
36.            });
    
37.                 return mouseXY;
    
38.                 },       
    
39.         contextMenu:function(jqElem,data,menuName,textLimit){
    
40.                   var _this=this
    
41.                       ,mXY=_this.mouseXY();
    
42.                   
    
43.           jqElem
    
44.                   .smartMenu(data,{
    
45.             name: menuName,
    
46.                         textLimit:textLimit,
    
47.                         afterShow:function(){
    
48.                                 var menu=$("#smartMenu_"+menuName);
    
49.                                 var myData=myLib.desktop.getMydata(),
    
50.                             wh=myData.winWh;//获取当前document宽高
    
51.                                 var menuXY=menu.offset(),menuH=menu.height(),menuW=menu.width();
    
52.                                 if(menuXY.top>wh['h']-menuH){
    
53.                                         menu.css('top',mXY[1]-menuH-2);
    
54.                                         }
    
55.                                 if(menuXY.left>wh['w']-menuW){
    
56.                                         menu.css('left',mXY[0]-menuW-2);
    
57.                                         }       
    
58.                                 }
    
59.            });
    
60.                   $(document.body).click(function(event){
    
61.                         event.preventDefault();                           
    
62.                         $.smartMenu.hide();
    
63.                                                   });
    
64.                 }       
    
65.         }

复制代码

📑 完整源码下载⬇

GitHub 地址：https://github.com/wanghao221/moyu
到此这篇关于HTML实现仿Windows桌面主题特效的实现的文章就介绍到这了,更多相关HTML仿Windows桌面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

梦中见花开。

你的信息来源是？我想了解更多。

阳光一抹_

太棒了！感谢分享这个信息！

AhtyDark

666666666666666666

风铃

确实牛逼

就连这个了

谢谢你的提醒，我会注意的。

后竹游戏

确实牛逼

56751212

这个话题真是有趣，我也对它感兴趣。

焦糖⛪拿铁

谢谢你的提醒，我会注意的。

不负相思

友善的讨论氛围是非常重要的。