La estructura del directorio es la siguiente:
├── jsLib │ ├── jquery.winResize.js │ ├── jquery-1.6.2.js │ ├── jquery-1.6.2.min.js │ ├── jquery-ui-1.8.16.custom.min.js │ ├── myLib.js │ ├── externo │ ├── jquery-smartMenú │ ├── temas │ └── interfaz de usuario ├── icono ├── imágenes ├── fondos de pantalla └── índice.html
código HTML
Código principal HTML:
<a href="https://haiyong.site" class="powered_by">Desarrollado por haiyong.site Nota: haga doble clic en la aplicación de escritorio para abrir</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"/> /lapso> <div class="text">Nuggets <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"/> /lapso> <div class="text">bilibili <div class="right_cron"></div> </div> </li> </ul> <div id="barra de tareas"> <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="Herramientas" path="https://haiyong.site/tools"/></li> <li id="app3"><img src="icon/icon2.png" title="Grupo de comunicación" ruta="https://app.yinxiang.com/fx/8aa8eb1b-7d45-4793-a160-b990d9da2e75" /></li> <li id="app4"> <img src="icon/icon3.png" title="Contactar al 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 escritorio"></span><span id="shizhong_btn" title="Reloj"></span><span id="weather_btn" title="Tiempo"></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="administrador de elementos"> <li><span class="adminImg"></span> Administrador</li> </ul> <ul clase="elemento"> <li><span class="sitting_btn"></span>Configuración del sistema</li> <li><span class="help_btn"></span>Guía de uso <b></b></li> <li><span class="about_btn"></span>Acerca de nosotros</li> <li><span class="logout_btn"></span>Salir del sistema</li> </ul> </div> </div> </div> </div>
¿Código CSS?
Código principal CSS:
cuerpo, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, formulario, conjunto de campos, entrada, área de texto, p, blockquote, th, td {
margen:0;
relleno: 0;
}
mesa {
colapso de fronteras: colapso;
espaciado de bordes: 0;
}
conjunto de campos, img {
borde:0;
}
dirección, título, citar, código, dfn, em, fuerte, th, var {
estilo de fuente: normal;
peso de fuente: normal;
}
ol, ul, li {
estilo de lista: ninguno;
}
título, th {
alineación de texto: izquierda;
}
h1, h2, h3, h4, h5, h6 {
tamaño de fuente: 100%;
peso de fuente: normal;
}
q:antes, q:después {
contenido:";
}
abbr, acrónimo {
borde:0;
}
* {
margen:0;
relleno: 0
}Estilo de página básico
/*Estilo de página básico*/
html {
desbordamiento: oculto;
}
cuerpo {
tamaño de fuente: 12px;
fondo:#06C url(wallpapers/menglong2.jpg) repetir desplazamiento centro centro;
familia de fuentes: Tahoma, Geneva, sans-serif;
margen:0;
relleno: 0
}
a {
tamaño de fuente: 12px;
}
a: enlace {
decoración de texto: ninguna;
color: #FFF;
}
a: visitado {
decoración de texto: ninguna;
color: #FFF;
}
a: flotar {
decoración de texto: ninguna;
color: #FFF;
}
a: activo {
decoración de texto: ninguna;
color: #FFF;
}
.corner {/*Solo funciona en navegadores avanzados que admitan CSS3*/
-radio-borde-moz: 5px;
-webkit-border-radio: 5px;
radio del borde: 5px;
-moz-box-sombra: 2px 2px 8px #444;
-webkit-box-sombra: 2px 2px 8px #444;
sombra de cuadro: 2px 2px 8px #444;
}
.cargando {
fondo:url(images/loading.gif) centro sin repetición centro
}Estilo de diseño de interfaz
/*Estilo de diseño de interfaz*/
.powered_by {
ancho: 160 px;
altura: 25 píxeles;
altura de línea: 25 px;
fondo:url(images/powered-by.png) centro izquierdo sin repetición;
color:#CCC;
sangría de texto: 26px;
mostrar:bloquear;
esquema: ninguno;
posición:absoluta;
derecha: 20px;
abajo: 60px;
}estilo de la barra de tareas
#barra de tareas {
ancho: 100%;
altura: 40 píxeles;
altura de línea: 40 px;
posición:absoluta;
derecha: 0;
abajo: 0;
}
#izquierdaBtn {
ancho: 100 px;
altura: 40 píxeles;
flotador: izquierda;
pantalla: ninguna;
}
#rightBtn {
ancho: 100 px;
altura: 40 píxeles;
flotador:derecha;
pantalla: ninguna;
}
#leftBtn a, #rightBtn a {
mostrar:bloquear;
ancho: 100 px;
altura: 40 píxeles;
esquema: ninguno;
imagen de fondo:url(imagenes/lr_btn.png);
repetición de fondo: sin repetición;
}
#leftBtn a {
posición de fondo: arriba izquierda;
}
#rightBtn a {
posición de fondo: arriba derecha;
}
#leftBtn a: pasar el cursor {
posición de fondo: abajo a la izquierda
}
#rightBtn a: pasar el cursor {
posición de fondo: abajo a la derecha
}
#task_lb_wrap {
altura: 40 píxeles;
altura de línea: 40 px;
desbordamiento: oculto;
posición: relativa;
}
#tarea_lb {
ancho:automático;
altura:automático;
posición:absoluta;
arriba: 0;
derecha: 0;
}
#task_lb a {
pantalla: bloque en línea;
esquema: ninguno;
ancho: 100 px;
altura: 40 píxeles;
imagen de fondo:url(imágenes/taskHdBtn.png);
repetición de fondo: sin repetición;
alineación de texto:centro;
altura de línea: 40 px;
flotador:derecha
}
#task_lb .defaultTab {
posición de fondo: arriba derecha;
color:#ccc
}
#task_lb .defaultTab:hover {
posición de fondo: abajo derecha;
}
#task_lb .selectTab {
posición de fondo: arriba izquierda;
color:#FFF
}
#task_lb .selectTab:desplazar el cursor {
posición de fondo: abajo a la izquierda
}
#shizhong_btn {
fondo:url(images/timer.png) centro sin repetición centro
}
#weather_btn {
fondo:url(images/wheather.png) centro sin repetición centro
}
#sonido_btn {
fondo:url(images/sound_open.png) centro sin repetición centro
}
#mostrarZm_btn {
fondo:url(images/show-desktop.png) centro sin repetición centro
}
#ellos_btn {
fondo:url(images/skin.png) centro sin repetición centro
}barra flotante lateral
#lr_bar {
ancho: 73px;
altura:automático;
posición:absoluta;
izquierda: 0;
arriba: 30px;
fondo:url(images/dock_top.png) repetir-y arriba izquierda;
índice z: 90;
-moz-box-sombra: 0px 3px 15px #444;
-webkit-box-sombra: 0px 3px 15px #444;
sombra de cuadro: 0px 3px 15px #444;
relleno superior: 5px;
}Estilo del botón de inicio
#start_block {
ancho: 73px;
altura: 56px;
posición:absoluta;
izquierda: 0;
abajo: -56px;
fondo:url(images/dock_b.png) no repetir en la parte inferior izquierda;
-moz-box-sombra: 0px 5px 15px #444;
-webkit-box-sombra: 0px 5px 15px #444;
sombra de cuadro: 0px 5px 15px #444;
}
#start_btn {
mostrar:bloquear;
ancho: 48px;
altura: 48 píxeles;
fondo:url(images/start-btn.png) parte inferior central sin repetición;
margen:4px automático 0 automático;
esquema: ninguno;
índice z: 501;
cursor:puntero;
}
#start_btn: pasar el cursor {
posición de fondo: centro superior
}Estilo del menú inicio
#artículo_inicial {
ancho: 180 px;
altura:automático;
relleno: 5px 0;
fondo: URL (imagenes/start_item_bg.png) repetir;
posición:absoluta;
índice z: 500;
izquierda: 75px;
abajo: 0px;
pantalla: ninguna;
-radio-borde-moz: 5px;
-webkit-border-radio: 5px;
radio del borde: 5px;
-moz-box-sombra: 2px 2px 5px #444;
-webkit-box-sombra: 2px 2px 5px #444;
sombra de cuadro: 2px 2px 5px #444;
}
#start_item .item {
ancho: 100%;
altura:automático;
borde superior: 1px sólido #999
}
#start_item .item li {
ancho: 98%;
altura: 24 píxeles;
desbordamiento: oculto;
ampliar:-1;
relleno:6px 0;
altura de línea: 24 px;
margen:0 automático;
color:#FFF;
}
#start_item .item li:hover {
fondo:url(images/start_item_over.png) repetir-x abajo izquierda;
cursor:puntero
}
#start_item .item li span {
pantalla: bloque en línea;
ancho: 24px;
altura: 24px;
imagen de fondo:url(imagenes/start_itembtn.png);
repetición de fondo: sin repetición;
margen: 0 10px;
flotador: izquierda;
}
#start_item .item li b {
ancho: 10px;
altura: 24px;
fondo:url(images/item-child.png) centro sin repetición centro;
pantalla: bloque en línea;
flotador:derecha;
margen derecho: 10px;
}
#start_item .sentado_btn {
posición de fondo: izquierda -140px;
}
#start_item .help_btn {
posición de fondo: izquierda -44px;
}
#start_item .about_btn {
posición de fondo: izquierda -164px;
}
#start_item .logout_btn {
posición de fondo: izquierda -20px;
}
#start_item .admin {
borde inferior: 1px sólido #444;
relleno: 5px 0;
borde superior: ninguno;
}
#start_item .item li .adminImg {
borde: 1px sólido #E0E0E0;
posición de fondo: izquierda -92px;
color de fondo:#FFF;
}Dispositivo predeterminado
#herramientas_predeterminadas {
ancho: 71 píxeles;
altura:automático;
desbordamiento: oculto;
ampliar:-1;
relleno: 5px 0;
borde superior: 1px sólido #555;
margen:0 automático;
}
#default_tools abarcan {
ancho: 30px;
altura: 30 píxeles;
pantalla: bloque en línea;
margen:0 0 0 3px;
cursor:puntero;
flotador: izquierda;
}Aplicación predeterminada
#aplicación_predeterminada {
ancho: 73px;
altura:automático;
relleno: 5px 0;
posición: relativa;
}
#default_app li {
ancho: 48px;
altura: 48 píxeles;
desbordamiento: oculto;
margen: 3px automático;
relleno: 6px;
}
#default_app li img {
ancho: 48px;
altura: 48 píxeles;
cursor:puntero;
}
#default_app .btnOver {
fondo:url(images/default_appbtn_bg.png) centro sin repetición centro
}Anular el estilo del menú contextual
.smart_menu_box .smart_menu_a {
color:#333
}
.smart_menu_box .smart_menu_li_separate {
borde inferior: 1px sólido #d6d5d5;
}estilo de ventana
.ventanas {
ancho mínimo: 240 px;
altura mínima: 200 px;
ancho: 700 px;
altura: 560 px;
posición:absoluta;
pantalla: ninguna;
color de fondo:#E0E0E0;
}
.win_title {
ancho: 100%;
altura: 26 píxeles;
altura de línea: 26px;
fondo:#E0E0E0 url(images/titlebar_bg_cur.png) repetir-x centro izquierda;
-radio-borde-moz: 5px;
-webkit-border-radio: 5px;
radio del borde: 5px;
}
.win_title b {
color:#333;
margen izquierdo: 10px;
}
.win_title .win_btnblock {
ancho:automático;
relleno: 0 5px;
flotador:derecha;
altura: 17px;
margen:4px 3px 0 0;
}
.win_title .win_btnbloquear un {
pantalla: bloque en línea;
ancho: 26px;
altura: 17px;
imagen de fondo:url(imagenes/windowBtn.png);
repetición de fondo: sin repetición;
flotador: izquierda;
margen:0 1px;
esquema: ninguno;
}
.winMaximizar {
posición de fondo: abajo derecha;
}
.winMaximize: flotar {
posición de fondo: arriba derecha;
}
.winHyimize {
posición de fondo: -26px abajo;
}
.winHyimize: flotar {
posición de fondo: -26px arriba;
}
.winCerrar {
posición de fondo: -52px arriba;
}
.winClose: flotar {
posición de fondo: -52px abajo;
}
.winMinimizar {
posición de fondo: abajo a la izquierda;
}
.winMinimize: flotar {
posición de fondo: arriba izquierda;
}
.winframe {
ancho: 100%;
altura:automático;
margen:0 0 0 3px;
relleno: 0
}iconos de escritorio
#escritorioIcon {
ancho: 100%;
altura:automático;
desbordamiento: oculto;
ampliar:-1;
posición: relativa;
}
.desktop_icon {
ancho: 86px;
altura: 88 píxeles;
cursor:puntero;
margen izquierdo: -1000px;
alineación de texto:centro;
}
.desktop_icon abarca {
mostrar:bloquear;
}
.desktop_icon .icono {
ancho: 50 píxeles;
altura: 50 píxeles;
margen: 5px automático;
}
.desktop_icon .icon img {
ancho: 50 píxeles;
altura: 50 píxeles;
}
.desktop_icon .texto {
pantalla: bloque en línea;
ancho:automático;
altura: 22 píxeles;
altura de línea: 22 px;
alineación de texto:centro;
color:#fff;
fondo:url(images/iconTextbg.png) centro izquierdo sin repetición;
posición: relativa;
relleno-izquierda: 10px;
margen derecho: 10px;
}
.desktop_icon .right_cron {
ancho: 10px;
altura: 22 píxeles;
posición:absoluta;
derecha: -10px;
arriba: 0;
fondo:url(images/iconTextbg_right.png) centro izquierdo sin repetición;
}
.desktop_icon_over {
fondo:url(images/icon_over.png) centro sin repetición centro;
}¿Código JS?
Hay muchos códigos JS. Aquí solo se muestra parte del código JS. El código fuente completo se puede obtener al final del artículo.
//Declarar el espacio del escritorio y encapsular las operaciones relacionadas myLib.NS("desktop");
myLib.desktop={
ganarWH:función(){
$('body').data('winWh',{'w':$(window).width(),'h':$(window).height()});
},
Panel de escritorio: función(){
$('cuerpo').data('panel',{
'barra de tareas':{
'_this':$('#taskBar'),
'tarea_lb':$('#tarea_lb')
},
'lrBar':{
'_this':$('#lr_bar'),
'aplicación_default':$('#aplicación_default'),
'start_block':$('#start_block'),
'start_btn':$('#start_btn'),
'start_item':$('#start_item'),
'herramientas_default':$('#herramientas_default')
},
'escritorioIcon':{
'_this':$('#deskIcon'),
'icono':$('li.desktop_icon')
},
'powered_by':$('a.powered_by')
});
},
getMisdatos:función(){
return $('cuerpo').datos();
},
ratónXY:función(){
var ratónXY=[];
$(documento).bind('mousemove',función(e){
mouseXY[0]=e.pageX;
mouseXY[1]=e.pageY;
});
devolver ratónXY;
},
menú contextual: función (jqElem, datos, nombre del menú, límite de texto) {
var_this=esto
,mXY=_this.mouseXY();
jqElem
.smartMenu(datos,{
nombre: nombre del menú,
límite de texto: límite de texto,
después de mostrar: función(){
var menú=$("#smartMenu_"+nombre del menú);
var misDatos=myLib.desktop.getMydata(),
wh=myData.winWh;//Obtener el ancho y alto del documento actual var menuXY=menu.offset(),menuH=menu.height(),menuW=menu.width();
if(menúXY.top>wh['h']-menúH){
menu.css('arriba',mXY[1]-menuH-2);
}
if(menúXY.izquierda>wh['w']-menúW){
menu.css('izquierda',mXY[0]-menuW-2);
}
}
});
$(document.body).click(función(evento){
evento.preventDefault();
$.smartMenu.hide();
});
}
}Dirección de GitHub: https://github.com/wanghao221/moyu
Con esto concluye este artículo sobre la implementación de HTML que imita los efectos del tema del escritorio de Windows. Para obtener más HTML relacionado que imite el contenido del escritorio de Windows, busque artículos anteriores en downcodes.com o continúe explorando los siguientes artículos relacionados. Espero que lea más en el futuro. ¡Apoya a downcodes.com!