A estrutura do diretório é a seguinte:
├──jsLib │ ├── jquery.winResize.js │ ├── jquery-1.6.2.js │ ├── jquery-1.6.2.min.js │ ├── jquery-ui-1.8.16.custom.min.js │ ├── minhaLib.js │ ├── externo │ ├── jquery-smartMenu │ ├── temas │ └──ui ├── ícone ├── imagens ├── papéis de parede └── index.html
Código HTML
Código principal HTML:
<a href="https://haiyong.site" class="powered_by">Desenvolvido por haiyong.site Observação: clique duas vezes no aplicativo de desktop para abri-lo</a> <ul id="deskIcon"> <li class="desktop_icon" id="win11" path="https://haiyong.site/"> <span class="icon"><img src="icon/icon14.png"/></span> <div class="text">haiyong <div class="right_cron"></div> </div> </li> <li class="desktop_icon" id="win11" path="https://haiyong.blog.csdn.net/"> <span class="icon"><img src="icon/csdn.png"/> </span> <div class="text">CSDN <div class="right_cron"></div> </div> </li> <li class="desktop_icon" id="win11" path="https://juejin.cn/user/2040341402229751"> <span class="icon"><img src="icon/juejin.png"/>< /span> <div class="text">Pepitas <div class="right_cron"></div> </div> </li> <li class="desktop_icon" id="win11" path="https://space.bilibili.com/63551025"> <span class="icon"><img src="icon/bilibili.png"/>< /span> <div class="text">bilibili <div class="right_cron"></div> </div> </li> </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 id="lr_bar"> <ul id="default_app"> <li id="app0"><img src="icon/icon1.png" title="haiyong" path="https://haiyong.site/"/></li> <li id="app2"><img src="icon/icon0.png" title="Ferramentas" path="https://haiyong.site/tools"/></li> <li id="app3"><img src="icon/icon2.png" title="Grupo de comunicação" path="https://app.yinxiang.com/fx/8aa8eb1b-7d45-4793-a160-b990d9da2e75" /></li> <li id="app4"> <img src="icon/icon3.png" title="Entre em contato com o autor" path="https://haiyong.site/img/qrcode/weixin.png"/></li> <li id="app1"><img src="icon/icon11.png" title="Jquery Academy" path="http://www.jq22.com/?Jquery.aspx"/></li> </ul> <div id="default_tools"> <span id="showZm_btn" title="Mostrar área de trabalho"></span><span id="shizhong_btn" title="Clock"></span><span id="weather_btn" title="Tempo"></span> <span id="them_btn" title="Tema"></span></div> <div id="start_block"> <a title="start" id="start_btn"></a> <div id="start_item"> <ul class="item admin"> <li><span class="adminImg"></span> Administrador</li> </ul> <ul class="item"> <li><span class="sitting_btn"></span>Configurações do sistema</li> <li><span class="help_btn"></span>Guia de uso <b></b></li> <li><span class="about_btn"></span>Sobre nós</li> <li><span class="logout_btn"></span>Sair do sistema</li> </ul> </div> </div> </div> </div>
?Código CSS
Código principal CSS:
corpo, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pré, formulário, conjunto de campos, entrada, área de texto, p, blockquote, th, td {
margem:0;
preenchimento:0;
}
mesa {
colapso de borda: colapso;
espaçamento de borda:0;
}
conjunto de campos, img {
borda:0;
}
endereço, legenda, citar, código, dfn, em, forte, th, var {
estilo da fonte:normal;
peso da fonte:normal;
}
ol, ul, li {
estilo de lista: nenhum;
}
legenda, o {
alinhamento de texto: esquerda;
}
h1, h2, h3, h4, h5, h6 {
tamanho da fonte: 100%;
peso da fonte:normal;
}
q:antes, q:depois {
contente:";
}
abr, sigla {
borda:0;
}
* {
margem:0;
preenchimento:0
}Estilo de página básico
/*Estilo básico da página*/
HTML {
estouro: oculto;
}
corpo {
tamanho da fonte: 12px;
background:#06C url(wallpapers/menglong2.jpg) repita o centro de rolagem;
família de fontes: Tahoma, Geneva, sem serifa;
margem:0;
preenchimento:0
}
um {
tamanho da fonte: 12px;
}
a: link {
decoração de texto: nenhuma;
cor: #FFF;
}
a:visitou {
decoração de texto: nenhuma;
cor: #FFF;
}
a: passar o mouse {
decoração de texto: nenhuma;
cor: #FFF;
}
a:ativo {
decoração de texto: nenhuma;
cor: #FFF;
}
.corner {/*Funciona apenas em navegadores avançados que suportam CSS3*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
raio da borda: 5px;
-moz-box-shadow: 2px 2px 8px #444;
-webkit-box-shadow: 2px 2px 8px #444;
sombra da caixa:2px 2px 8px #444;
}
.carregando {
background:url(images/loading.gif) centro sem repetição centro
}Estilo de layout da interface
/*Estilo de layout da interface*/
.distribuído por {
largura:160px;
altura:25px;
altura da linha: 25px;
background:url(images/powered-by.png) sem repetição no centro esquerdo;
cor:#CCC;
recuo do texto:26px;
exibição: bloco;
esboço: nenhum;
posição:absoluta;
direita: 20px;
inferior: 60px;
}estilo da barra de tarefas
#taskBar {
largura:100%;
altura:40px;
altura da linha: 40px;
posição:absoluta;
certo:0;
inferior:0;
}
#esquerdaBtn {
largura:100px;
altura:40px;
flutuar:esquerda;
exibição: nenhum;
}
#rightBtn {
largura:100px;
altura:40px;
flutuar:certo;
exibição: nenhum;
}
#esquerdaBtn a, #direitaBtn a {
exibição: bloco;
largura:100px;
altura:40px;
esboço: nenhum;
imagem de fundo:url(images/lr_btn.png);
repetição em segundo plano: sem repetição;
}
#leftBtn a {
posição de fundo: canto superior esquerdo;
}
#rightBtn a {
posição de fundo: canto superior direito;
}
#leftBtn a:hover {
posição de fundo: inferior esquerdo
}
#rightBtn a:hover {
posição de fundo: inferior direito
}
#task_lb_wrap {
altura:40px;
altura da linha: 40px;
estouro: oculto;
posição:relativo;
}
#tarefa_lb {
largura:automático;
altura:automático;
posição:absoluta;
topo:0;
certo:0;
}
#task_lb a {
display: bloco embutido;
esboço: nenhum;
largura:100px;
altura:40px;
imagem de fundo:url(imagens/taskHdBtn.png);
repetição em segundo plano: sem repetição;
alinhamento de texto:centro;
altura da linha: 40px;
flutuar: certo
}
#task_lb.defaultTab {
posição de fundo: canto superior direito;
cor:#ccc
}
#task_lb .defaultTab:hover {
posição de fundo: parte inferior direita;
}
#task_lb .selectTab {
posição de fundo: canto superior esquerdo;
cor:#FFF
}
#task_lb .selectTab:hover {
posição de fundo: inferior esquerdo
}
#shizhong_btn {
background:url(images/timer.png) centro sem repetição centro
}
#clima_btn {
background:url(images/wheather.png) centro sem repetição centro
}
#sound_btn {
background:url(images/sound_open.png) centro sem repetição centro
}
#showZm_btn {
background:url(images/show-desktop.png) centro sem repetição centro
}
#eles_btn {
background:url(images/skin.png) centro sem repetição centro
}Barra flutuante lateral
#lr_bar {
largura:73px;
altura:automático;
posição:absoluta;
esquerda:0;
topo:30px;
background:url(images/dock_top.png) repetir-y canto superior esquerdo;
índice z:90;
-moz-box-shadow: 0px 3px 15px #444;
-webkit-box-shadow: 0px 3px 15px #444;
sombra da caixa:0px 3px 15px #444;
preenchimento superior: 5px;
}Estilo do botão Iniciar
#start_block {
largura:73px;
altura:56px;
posição:absoluta;
esquerda:0;
inferior: -56px;
background:url(images/dock_b.png) sem repetição inferior esquerdo;
-moz-box-shadow: 0px 5px 15px #444;
-webkit-box-shadow: 0px 5px 15px #444;
sombra da caixa:0px 5px 15px #444;
}
#start_btn {
exibição: bloco;
largura:48px;
altura:48px;
background:url(images/start-btn.png) sem repetição central inferior;
margem:4px automático 0 automático;
esboço: nenhum;
índice z:501;
cursor:ponteiro;
}
#start_btn:hover {
posição de fundo: centro superior
}Estilo do menu Iniciar
#start_item {
largura:180px;
altura:automático;
preenchimento:5px 0;
plano de fundo: url(images/start_item_bg.png) repetir;
posição:absoluta;
índice z:500;
esquerda:75px;
inferior:0px;
exibição: nenhum;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
raio da borda: 5px;
-moz-box-shadow: 2px 2px 5px #444;
-webkit-box-shadow: 2px 2px 5px #444;
sombra da caixa:2px 2px 5px #444;
}
#start_item.item{
largura:100%;
altura:automático;
borda superior: 1px sólido #999
}
#start_item.item li {
largura:98%;
altura:24px;
estouro: oculto;
ampliar:-1;
preenchimento:6px 0;
altura da linha: 24px;
margem:0 automático;
cor:#FFF;
}
#start_item .item li:hover {
background:url(images/start_item_over.png) repita-x canto inferior esquerdo;
cursor: ponteiro
}
#start_item .item li span {
display: bloco embutido;
largura:24px;
altura:24px;
imagem de fundo:url(images/start_itembtn.png);
repetição em segundo plano: sem repetição;
margem:0 10px;
flutuar:esquerda;
}
#start_item .item li b {
largura:10px;
altura:24px;
background:url(images/item-child.png) centro sem repetição centro;
display: bloco embutido;
flutuar:certo;
margem direita: 10px;
}
#start_item.sitting_btn {
posição de fundo: esquerda -140px;
}
#start_item.help_btn {
posição de fundo: esquerda -44px;
}
#start_item.about_btn{
posição de fundo: esquerda -164px;
}
#start_item.logout_btn {
posição de fundo: esquerda -20px;
}
#start_item.admin {
borda inferior:1px sólido #444;
preenchimento:5px 0;
borda superior: nenhum;
}
#start_item .item li .adminImg {
borda: 1px sólido #E0E0E0;
posição de fundo: esquerda -92px;
cor de fundo:#FFF;
}Gadget padrão
#default_tools{
largura:71px;
altura:automático;
estouro: oculto;
ampliar:-1;
preenchimento:5px 0;
borda superior: 1px sólido #555;
margem:0 automático;
}
#default_tools span {
largura:30px;
altura:30px;
display: bloco embutido;
margem:0 0 0 3px;
cursor:ponteiro;
flutuar:esquerda;
}Aplicativo padrão
#default_app {
largura:73px;
altura:automático;
preenchimento:5px 0;
posição:relativo;
}
#default_appli {
largura:48px;
altura:48px;
estouro: oculto;
margem:3px automático;
preenchimento: 6px;
}
#default_app li img {
largura:48px;
altura:48px;
cursor:ponteiro;
}
#default_app .btnOver {
background:url(images/default_appbtn_bg.png) centro sem repetição centro
}Substituir estilo de menu do botão direito
.smart_menu_box .smart_menu_a {
cor:#333
}
.smart_menu_box .smart_menu_li_separate {
borda inferior: 1px sólido #d6d5d5;
}estilo de janela
.windows {
largura mínima: 240px;
altura mínima: 200px;
largura:700px;
altura:560px;
posição:absoluta;
exibição: nenhum;
cor de fundo:#E0E0E0;
}
.win_title{
largura:100%;
altura:26px;
altura da linha: 26px;
background:#E0E0E0 url(images/titlebar_bg_cur.png) repita-x centro esquerdo;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
raio da borda: 5px;
}
.win_title b {
cor:#333;
margem esquerda: 10px;
}
.win_title .win_btnblock {
largura:automático;
preenchimento:0 5px;
flutuar:certo;
altura:17px;
margem:4px 3px 0 0;
}
.win_title .win_btnbloquear a {
display: bloco embutido;
largura:26px;
altura:17px;
imagem de fundo:url(imagens/windowBtn.png);
repetição em segundo plano: sem repetição;
flutuar:esquerda;
margem:0 1px;
esboço: nenhum;
}
.winMaximize {
posição de fundo: parte inferior direita;
}
.winMaximize:hover {
posição de fundo: canto superior direito;
}
.winHyimize {
posição de fundo: -26px inferior;
}
.winHyimize:hover {
posição de fundo: -26px superior;
}
.winClose {
posição de fundo: -52px superior;
}
.winClose:hover {
posição de fundo: -52px inferior;
}
.winMinimize {
posição de fundo: parte inferior esquerda;
}
.winMinimize:hover {
posição de fundo: canto superior esquerdo;
}
.winframe{
largura:100%;
altura:automático;
margem:0 0 0 3px;
preenchimento:0
}ícones da área de trabalho
#deskIcon {
largura:100%;
altura:automático;
estouro: oculto;
ampliar:-1;
posição:relativo;
}
.desktop_icon {
largura:86px;
altura:88px;
cursor:ponteiro;
margem esquerda: -1000px;
alinhamento de texto:centro;
}
.desktop_icon span {
exibição: bloco;
}
.desktop_icon .icon {
largura:50px;
altura:50px;
margem:5px automático;
}
.desktop_icon .icon img {
largura:50px;
altura:50px;
}
.desktop_icon.texto{
display: bloco embutido;
largura:automático;
altura:22px;
altura da linha: 22px;
alinhamento de texto:centro;
cor:#fff;
background:url(images/iconTextbg.png) sem repetição no centro esquerdo;
posição:relativo;
preenchimento à esquerda: 10px;
margem direita: 10px;
}
.desktop_icon.right_cron{
largura:10px;
altura:22px;
posição:absoluta;
direita: -10px;
topo:0;
background:url(images/iconTextbg_right.png) centro esquerdo sem repetição;
}
.desktop_icon_over {
background:url(images/icon_over.png) centro sem repetição centro;
}?Código JS
Existem muitos códigos JS. Apenas parte do código JS é mostrada aqui. O código-fonte completo pode ser obtido no final do artigo.
//Declara o espaço da área de trabalho e encapsula as operações relacionadas myLib.NS("desktop");
minhaLib.desktop={
winWH:função(){
$('body').data('winWh',{'w':$(window).width(),'h':$(window).height()});
},
desktopPanel:função(){
$('corpo').data('painel',{
'barra de tarefas':{
'_isto':$('#taskBar'),
'tarefa_lb':$('#tarefa_lb')
},
'lrBar':{
'_este':$('#lr_bar'),
'default_app':$('#default_app'),
'start_block':$('#start_block'),
'start_btn':$('#start_btn'),
'item_inicial':$('#item_inicial'),
'ferramentas_padrão':$('#ferramentas_padrão')
},
'deskIcon':{
'_este':$('#deskIcon'),
'ícone':$('li.desktop_icon')
},
'powered_by':$('a.powered_by')
});
},
getMeusdados:função(){
retornar $('corpo').dados();
},
mouseXY:função(){
var mouseXY=[];
$(documento).bind('mousemove',function(e){
mouseXY[0]=e.páginaX;
mouseXY[1]=e.páginaY;
});
retornar mouseXY;
},
contextMenu:function(jqElem,data,menuName,textLimit){
var_isto = isto
,mXY=_this.mouseXY();
jqElem
.smartMenu(dados,{
nome: menuNome,
limite de texto: limite de texto,
afterShow:função(){
var menu=$("#smartMenu_"+menuNome);
var meusdados=myLib.desktop.getMydata(),
wh=myData.winWh;//Obtém a largura e altura atuais do documento var menuXY=menu.offset(),menuH=menu.height(),menuW=menu.width();
if(menuXY.top>wh['h']-menuH){
menu.css('topo',mXY[1]-menuH-2);
}
if(menuXY.left>wh['w']-menuW){
menu.css('esquerda',mXY[0]-menuW-2);
}
}
});
$(document.body).click(function(evento){
event.preventDefault();
$.smartMenu.hide();
});
}
}Endereço GitHub: https://github.com/wanghao221/moyu
Isso conclui este artigo sobre a implementação de efeitos de tema de área de trabalho do Windows que imitam HTML. Para obter mais informações relacionadas ao conteúdo da área de trabalho do Windows, pesquise artigos anteriores em downcodes.com ou continue navegando nos artigos relacionados a seguir. . Suporte downcodes.com!