第JS仿Windows實(shí)現(xiàn)桌面主題特效目錄實(shí)現(xiàn)效果項(xiàng)目基本結(jié)構(gòu)HTML代碼CSS代碼頁面基礎(chǔ)樣式界面布局樣式任務(wù)欄樣式側(cè)邊浮動欄開始按鈕樣式開始菜單樣式默認(rèn)小工具默認(rèn)應(yīng)用程序重寫右鍵菜單樣式窗口樣式桌面圖標(biāo)JS代碼

實(shí)現(xiàn)效果

在線演示地址：https://haiyong.site/win

項(xiàng)目基本結(jié)構(gòu)

目錄結(jié)構(gòu)如下：

HTML代碼

HTML主要代碼：

aPoweredbyhaiyong.site注意：雙擊桌面應(yīng)用即可點(diǎn)開/a

ulid="deskIcon"

liid="win11"path="https://haiyong.site/"spanimgsrc="icon/icon14.png"http://span

div海擁

div/div

/div

/li

liid="win11"path="/"spanimgsrc="icon/csdn.png"http://span

divCSDN

div/div

/div

/li

liid="win11"path="/user/2040341402229751"spanimgsrc="icon/juejin.png"http://span

div掘金

div/div

/div

/li

liid="win11"path="/63551025"spanimgsrc="icon/bilibili.png"http://span

divbilibili

div/div

/div

/li

/ul

divid="taskBar"

divid="leftBtn"ahref="#"rel="externalnofollow"rel="externalnofollow"/a/div

divid="rightBtn"ahref="#"rel="externalnofollow"rel="externalnofollow"/a/div

divid="task_lb_wrap"

divid="task_lb"/div

/div

/div

divid="lr_bar"

ulid="default_app"

liid="app0"imgsrc="icon/icon1.png"title="海擁"path="https://haiyong.site/"http://li

liid="app2"imgsrc="icon/icon0.png"title="工具"path="https://haiyong.site/tools"http://li

liid="app3"imgsrc="icon/icon2.png"title="交流群"path="/fx/8aa8eb1b-7d45-4793-a160-b990d9da2e75"http://li

liid="app4"imgsrc="icon/icon3.png"title="聯(lián)系作者"path="https://haiyong.site/img/qrcode/weixin.png"http://li

liid="app1"imgsrc="icon/icon11.png"title="Jquery學(xué)堂"path="/Jquery.aspx"http://li

/ul

divid="default_tools"spanid="showZm_btn"title="顯示桌面"/spanspanid="shizhong_btn"title="時(shí)鐘"/spanspanid="weather_btn"title="天氣"/spanspanid="them_btn"title="主題"/span/div

divid="start_block"atitle="開始"id="start_btn"/a

divid="start_item"

lispan/spanAdmin/li

/ul

lispan/span系統(tǒng)設(shè)置/li

lispan/span使用指南b/b/li

lispan/span關(guān)于我們/li

lispan/span退出系統(tǒng)/li

/ul

/div

/div

/div

/div

CSS代碼

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

}

頁面基礎(chǔ)樣式

/*頁面基礎(chǔ)樣式*/

html{

overflow:hidden;

body{

font-size:12px;

background:#06Curl(wallpapers/menglong2.jpg)repeatscrollcentercenter;

font-family:Tahoma,Geneva,sans-serif;

margin:0;

padding:0

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:2px2px8px#444;

-webkit-box-shadow:2px2px8px#444;

box-shadow:2px2px8px#444;

.loading{

background:url(images/loading.gif)no-repeatcentercenter

}

界面布局樣式

/*界面布局樣式*/

.powered_by{

width:160px;

height:25px;

line-height:25px;

background:url(images/powered-by.png)no-repeatleftcenter;

color:#CCC;

text-indent:26px;

display:block;

outline:none;

position:absolute;

right:20px;

bottom:60px;

}

任務(wù)欄樣式

#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;

#leftBtna,#rightBtna{

display:block;

width:100px;

height:40px;

outline:none;

background-image:url(images/lr_btn.png);

background-repeat:no-repeat;

#leftBtna{

background-position:lefttop;

#rightBtna{

background-position:righttop;

#leftBtna:hover{

background-position:leftbottom

#rightBtna:hover{

background-position:rightbottom

#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_lba{

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:righttop;

color:#ccc

#task_lb.defaultTab:hover{

background-position:rightbottom;

#task_lb.selectTab{

background-position:lefttop;

color:#FFF

#task_lb.selectTab:hover{

background-position:leftbottom

#shizhong_btn{

background:url(images/timer.png)no-repeatcentercenter

#weather_btn{

background:url(images/wheather.png)no-repeatcentercenter

#sound_btn{

background:url(images/sound_open.png)no-repeatcentercenter

#showZm_btn{

background:url(images/show-desktop.png)no-repeatcentercenter

#them_btn{

background:url(images/skin.png)no-repeatcentercenter

}

側(cè)邊浮動欄

#lr_bar{

width:73px;

height:auto;

position:absolute;

left:0;

top:30px;

background:url(images/dock_top.png)repeat-ylefttop;

z-index:90;

-moz-box-shadow:0px3px15px#444;

-webkit-box-shadow:0px3px15px#444;

box-shadow:0px3px15px#444;

padding-top:5px;

}

開始按鈕樣式

#start_block{

width:73px;

height:56px;

position:absolute;

left:0;

bottom:-56px;

background:url(images/dock_b.png)no-repeatleftbottom;

-moz-box-shadow:0px5px15px#444;

-webkit-box-shadow:0px5px15px#444;

box-shadow:0px5px15px#444;

#start_btn{

display:block;

width:48px;

height:48px;

background:url(images/start-btn.png)no-repeatcenterbottom;

margin:4pxauto0auto;

outline:none;

z-index:501;

cursor:pointer;

#start_btn:hover{

background-position:centertop

}

開始菜單樣式

#start_item{

width:180px;

height:auto;

padding:5px0;

background:url(images/start_item_bg.png)repeat;

position:absolute;

z-index:500;

left:75px;

bottom:0px;

display:none;

-moz-border-radius:5px;

-webkit-border-radius:5px;

border-radius:5px;

-moz-box-shadow:2px2px5px#444;

-webkit-box-shadow:2px2px5px#444;

box-shadow:2px2px5px#444;

#start_item.item{

width:100%;

height:auto;

border-top:1pxsolid#999

#start_item.itemli{

width:98%;

height:24px;

overflow:hidden;

zoom:-1;

padding:6px0;

line-height:24px;

margin:0auto;

color:#FFF;

#start_item.itemli:hover{

background:url(images/start_item_over.png)repeat-xleftbottom;

cursor:pointer

#start_item.itemlispan{

display:inline-block;

width:24px;

height:24px;

background-image:url(images/start_itembtn.png);

background-repeat:no-repeat;

margin:010px;

float:left;

#start_item.itemlib{

width:10px;

height:24px;

background:url(images/item-child.png)no-repeatcentercenter;

display:inline-block;

float:right;

margin-right:10px;

#start_item.sitting_btn{

background-position:left-140px;

#start_item.help_btn{

background-position:left-44px;

#start_item.about_btn{

background-position:left-164px;

#start_item.logout_btn{

background-position:left-20px;

#start_item.admin{

border-bottom:1pxsolid#444;

padding:5px0;

border-top:none;

#start_item.itemli.adminImg{

border:1pxsolid#E0E0E0;

background-position:left-92px;

background-color:#FFF;

}

默認(rèn)小工具

#default_tools{

width:71px;

height:auto;

overflow:hidden;

zoom:-1;

padding:5px0;

border-top:1pxsolid#555;

margin:0auto;

#default_toolsspan{

width:30px;

height:30px;

display:inline-block;

margin:0003px;

cursor:pointer;

float:left;

}

默認(rèn)應(yīng)用程序

#default_app{

width:73px;

height:auto;

padding:5px0;

position:relative;

#default_appli{

width:48px;

height:48px;

overflow:hidden;

margin:3pxauto;

padding:6px;

#default_appliimg{

width:48px;

height:48px;

cursor:pointer;

#default_app.btnOver{

background:url(images/default_appbtn_bg.png)no-repeatcentercenter

}

重寫右鍵菜單樣式

.smart_menu_box.smart_menu_a{

color:#333

.smart_menu_box.smart_menu_li_separate{

border-bottom:1pxsolid#d6d5d5;

}

窗口樣式

.windows{

min-width:240px;

min-height:200px;

width:700px;

height:560px;

position:absolute;

display:none;

background-color:#E0E0E0;

.win_title{

width:100%;

height:26px;

line-height:26px;

background:#E0E0E0url(images/titlebar_bg_cur.png)repeat-xleftcenter;

-moz-border-radius:5px;

-webkit-border-radius:5px;

border-radius:5px;

.win_titleb{

color:#333;

margin-left:10px;

.win_title.win_btnblock{

width:auto;

padding:05px;

float:right;

height:17px;

margin:4px3px00;

.win_title.win_btnblocka{

display:inline-block;

width:26px;

height:17px;

background-image:url(images/windowBtn.png);

background-repeat:no-repeat;

float:left;

margin:01px;

outline:none;

.winMaximize{

background-position:rightbottom;

.winMaximize:hover{

background-position:righttop;

.winHyimize{

background-position:-26pxbottom;

.winHyimize:hover{

background-position:-26pxtop;

.winClose{

background-position:-52pxtop;

.winClose:hover{

background-position:-52pxbottom;

.winMinimize{

background-position:leftbottom;

.winMinimize:hover{

background-position:lefttop;

.winframe{

width:100%;

height:auto;

margin:0003px;

padding:0

}

桌面圖標(biāo)

#deskIcon{

width:100%;

height:auto;

overflow:hidden;

zoom:-1;

position:relative;

.desktop_icon{

width:86px;

height:88px;

cursor:pointer;

margin-left:-1000px;

text-align:center;

.desktop_iconspan{

display:block;

.desktop_icon.icon{

width:50px;

height:50px;

margin:5pxauto;

.desktop_icon.iconimg{

width:50px;

height:50px;

.desktop_icon.text{

display:inline-block;

width:auto;

height:22px;

line-height:22px;

text-align:center;

color:#fff;

background:url(images/iconTextbg.png)no-repeatleftcenter;

position:relative;

padding-left:10px;

margin-right:10px;

.desktop_icon.right_cron{

width:10px;

height:22px;

position:absolute;

right:-10px;

top:0;

background:url(images/iconTextbg_right.png)leftcenterno-repeat;

.desktop_icon_over{

background:url(images/icon_over.png)no-repeatcentercenter;

}

JS代碼

JS代碼較多這里只展示部分JS代碼，完整源碼可在文末獲取

//聲明desktop空間,封裝相關(guān)操作

myLib.NS("desktop");

myLib.desktop={

winWH:function(){

$('body').data('winWh',{'w':$(window).width(),'h':$(window).height()});

desktopPanel:function(){

$('body').data('panel',{

'taskBar':{

'_this':$('#taskBar'),

'task_lb':$('#task_lb'