La structure des répertoires est la suivante :
├── jsLib │ ├── jquery.winResize.js │ ├── jquery-1.6.2.js │ ├── jquery-1.6.2.min.js │ ├── jquery-ui-1.8.16.custom.min.js │ ├── maLib.js │ ├── externe │ ├── jquery-smartMenu │ ├── thèmes │ └── interface utilisateur Icône ├── ├──images ├── fonds d'écran └── index.html
Code HTML
Code HTML principal :
<a href="https://haiyong.site" class="powered_by">Propulsé par haiyong.site Remarque : Double-cliquez sur l'application de bureau pour l'ouvrir</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">RPSC <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"/>< /envergure> <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"/>< /envergure> <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="Outils" path="https://haiyong.site/tools"/></li> <li id="app3"><img src="icon/icon2.png" title="Groupe de communication" path="https://app.yinxiang.com/fx/8aa8eb1b-7d45-4793-a160-b990d9da2e75" /></li> <li id="app4"> <img src="icon/icon3.png" title="Contacter l'auteur" 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="Afficher le bureau"></span><span id="shizhong_btn" title="Horloge"></span><span id="weather_btn" title="Météo"></span> <span id="them_btn" title="Thème"></span></div> <div id="start_block"> <a title="Démarrer" id="start_btn"></a> <div id="start_item"> <ul class="item admin"> <li><span class="adminImg"></span> Administrateur</li> </ul> <ul class="article"> <li><span class="sitting_btn"></span>Paramètres système</li> <li><span class="help_btn"></span>Guide d'utilisation <b></b></li> <li><span class="about_btn"></span>À propos de nous</li> <li><span class="logout_btn"></span>Quitter le système</li> </ul> </div> </div> </div> </div>
?code CSS
Code principal CSS :
corps, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pré, formulaire, champset, entrée, zone de texte, p, blockquote, th, td {
marge : 0 ;
remplissage : 0 ;
}
tableau {
border-collapse:collapse;
espacement des bordures : 0 ;
}
ensemble de champs, img {
bordure : 0 ;
}
adresse, légende, citer, code, dfn, em, strong, th, var {
style de police : normal ;
poids de la police : normal ;
}
ol, ul, li {
style de liste : aucun ;
}
légende, le {
texte-align:gauche;
}
h1, h2, h3, h4, h5, h6 {
taille de police : 100 % ;
poids de la police : normal ;
}
q:avant, q:après {
contenu:";
}
abréviation, acronyme {
bordure : 0 ;
}
* {
marge : 0 ;
rembourrage : 0
}Style de page de base
/*Style de page de base*/
html{
débordement : caché ;
}
corps {
taille de police : 12 px ;
arrière-plan : #06C url(wallpapers/menglong2.jpg) répéter le centre de défilement ;
famille de polices : Tahoma, Genève, sans empattement ;
marge : 0 ;
rembourrage : 0
}
un {
taille de police : 12 px ;
}
a:lien {
décoration de texte : aucune ;
couleur : #FFF ;
}
a: visité {
décoration de texte : aucune ;
couleur : #FFF ;
}
a: survolez {
décoration de texte : aucune ;
couleur : #FFF ;
}
a:actif {
décoration de texte : aucune ;
couleur : #FFF ;
}
.corner {/*Fonctionne uniquement dans les navigateurs avancés prenant en charge CSS3*/
-moz-border-radius : 5px ;
-webkit-border-radius : 5px ;
rayon de bordure : 5 px ;
-moz-box-shadow : 2px 2px 8px #444 ;
-webkit-box-shadow : 2px 2px 8px #444 ;
boîte-ombre : 2px 2px 8px #444 ;
}
.chargement {
background:url(images/loading.gif) centre sans répétition
}Style de disposition de l'interface
/*Style de présentation de l'interface*/
.alimenté par {
largeur : 160 px ;
hauteur : 25 px ;
hauteur de ligne : 25 px ;
background:url(images/powered-by.png) centre gauche sans répétition ;
couleur : #CCC ;
retrait de texte : 26 px ;
affichage:bloc;
contour : aucun ;
position : absolue ;
à droite : 20 px ;
bas : 60 px ;
}style de barre des tâches
#barre des tâches {
largeur : 100 % ;
hauteur : 40 px ;
hauteur de ligne : 40 px ;
position : absolue ;
à droite : 0 ;
bas : 0 ;
}
#gaucheBtn {
largeur : 100 px ;
hauteur : 40 px ;
flotteur : gauche ;
affichage : aucun ;
}
#rightBtn {
largeur : 100 px ;
hauteur : 40 px ;
flotteur : à droite ;
affichage : aucun ;
}
#leftBtn a, #rightBtn a {
affichage:bloc;
largeur : 100 px ;
hauteur : 40 px ;
contour : aucun ;
image d'arrière-plan:url(images/lr_btn.png);
répétition d'arrière-plan : pas de répétition ;
}
#leftBtn un {
position d'arrière-plan : en haut à gauche ;
}
#rightBtn un {
position d'arrière-plan : en haut à droite ;
}
#leftBtn a:hover {
position d'arrière-plan : en bas à gauche
}
#rightBtn a:hover {
position d'arrière-plan : en bas à droite
}
#task_lb_wrap {
hauteur : 40 px ;
hauteur de ligne : 40 px ;
débordement : caché ;
position : relative ;
}
#tâche_lb {
largeur:automatique;
hauteur : auto ;
position : absolue ;
haut : 0 ;
à droite : 0 ;
}
#task_lb un {
display:bloc en ligne ;
contour : aucun ;
largeur : 100 px ;
hauteur : 40 px ;
image d'arrière-plan:url(images/taskHdBtn.png);
répétition d'arrière-plan : pas de répétition ;
texte-align:centre;
hauteur de ligne : 40 px ;
flottant : à droite
}
#task_lb .defaultTab {
position d'arrière-plan : en haut à droite ;
couleur:#ccc
}
#task_lb .defaultTab: survoler {
position d'arrière-plan : en bas à droite ;
}
#task_lb .selectTab {
position d'arrière-plan : en haut à gauche ;
couleur:#FFF
}
#task_lb .selectTab:survoler {
position d'arrière-plan : en bas à gauche
}
#shizhong_btn {
background:url(images/timer.png) centre sans répétition
}
#météo_btn {
background:url(images/wweather.png) centre sans répétition
}
#sound_btn {
background:url(images/sound_open.png) centre sans répétition
}
#showZm_btn {
background:url(images/show-desktop.png) centre sans répétition
}
#eux_btn {
background:url(images/skin.png) centre sans répétition
}Barre flottante latérale
#lr_bar {
largeur : 73 px ;
hauteur : auto ;
position : absolue ;
gauche : 0 ;
haut : 30 px ;
background:url(images/dock_top.png) répéter en haut à gauche ;
indice z : 90 ;
-moz-box-shadow : 0px 3px 15px #444 ;
-webkit-box-shadow : 0px 3px 15px #444 ;
ombre de boîte : 0px 3px 15px #444 ;
rembourrage supérieur : 5 px ;
}Style du bouton Démarrer
#start_block {
largeur : 73 px ;
hauteur : 56 px ;
position : absolue ;
gauche : 0 ;
bas : -56px ;
background:url(images/dock_b.png) sans répétition en bas à gauche ;
-moz-box-shadow : 0px 5px 15px #444 ;
-webkit-box-shadow : 0px 5px 15px #444 ;
ombre-boîte :0px 5px 15px #444 ;
}
#start_btn {
affichage:bloc;
largeur : 48 px ;
hauteur : 48 px ;
background:url(images/start-btn.png) bas central sans répétition ;
marge : 4px auto 0 auto ;
contour : aucun ;
indice z : 501 ;
curseur:pointeur;
}
#start_btn:survolez {
position d'arrière-plan : centre en haut
}Style du menu Démarrer
#start_item {
largeur : 180 px ;
hauteur : auto ;
remplissage : 5 px 0 ;
arrière-plan : url(images/start_item_bg.png) répéter ;
position : absolue ;
indice z : 500 ;
gauche : 75px ;
bas :0px ;
affichage : aucun ;
-moz-border-radius : 5px ;
-webkit-border-radius : 5px ;
rayon de bordure : 5 px ;
-moz-box-shadow : 2px 2px 5px #444 ;
-webkit-box-shadow : 2px 2px 5px #444 ;
boîte-ombre : 2px 2px 5px #444 ;
}
#start_item .item {
largeur : 100 % ;
hauteur : auto ;
bordure supérieure : 1px solide #999
}
#start_item .item li {
largeur : 98 % ;
hauteur : 24 px ;
débordement : caché ;
zoom:-1 ;
remplissage : 6 px 0 ;
hauteur de ligne : 24 px ;
marge : 0 automatique ;
couleur : #FFF ;
}
#start_item .item li:hover {
background:url(images/start_item_over.png) répéter-x en bas à gauche ;
curseur:pointeur
}
#start_item .item li span {
display:bloc en ligne ;
largeur : 24 px ;
hauteur : 24 px ;
image d'arrière-plan:url(images/start_itembtn.png);
répétition d'arrière-plan : pas de répétition ;
marge :0 10px ;
flotteur : gauche ;
}
#start_item .item li b {
largeur : 10 px ;
hauteur : 24 px ;
background:url(images/item-child.png) centre sans répétition ;
display:bloc en ligne ;
flotteur : à droite ;
marge droite : 10 px ;
}
#start_item .sitting_btn {
position d'arrière-plan : gauche -140 px ;
}
#start_item .help_btn {
position d'arrière-plan :gauche -44px ;
}
#start_item .about_btn {
position d'arrière-plan :gauche -164px ;
}
#start_item .logout_btn {
position d'arrière-plan : gauche -20 px ;
}
#start_item .admin {
bordure inférieure : 1px solide #444 ;
remplissage : 5 px 0 ;
bordure supérieure : aucune ;
}
#start_item .item li .adminImg {
bordure : 1px solide #E0E0E0 ;
position d'arrière-plan : gauche -92 px ;
couleur d'arrière-plan :#FFF ;
}Gadget par défaut
#default_tools {
largeur : 71 px ;
hauteur : auto ;
débordement : caché ;
zoom:-1 ;
remplissage : 5 px 0 ;
bordure supérieure : 1px solide #555 ;
marge : 0 automatique ;
}
#default_tools durée {
largeur : 30 px ;
hauteur : 30 px ;
display:bloc en ligne ;
marge :0 0 0 3px ;
curseur:pointeur;
flotteur : gauche ;
}Application par défaut
#default_app {
largeur : 73 px ;
hauteur : auto ;
remplissage : 5 px 0 ;
position : relative ;
}
#default_app li {
largeur : 48 px ;
hauteur : 48 px ;
débordement : caché ;
marge : 3px automatique ;
remplissage : 6 px ;
}
#default_app li img {
largeur : 48 px ;
hauteur : 48 px ;
curseur:pointeur;
}
#default_app .btnOver {
background:url(images/default_appbtn_bg.png) centre sans répétition
}Remplacer le style du menu contextuel
.smart_menu_box .smart_menu_a {
couleur:#333
}
.smart_menu_box .smart_menu_li_separate {
bordure inférieure : 1px solide #d6d5d5 ;
}style de fenêtre
.windows {
largeur minimale : 240 px ;
hauteur minimale : 200 px ;
largeur : 700 px ;
hauteur : 560 px ;
position : absolue ;
affichage : aucun ;
couleur d'arrière-plan : #E0E0E0 ;
}
.win_titre {
largeur : 100 % ;
hauteur : 26 px ;
hauteur de ligne : 26 px ;
background:#E0E0E0 url(images/titlebar_bg_cur.png) répéter-x centre gauche ;
-moz-border-radius : 5px ;
-webkit-border-radius : 5px ;
rayon de bordure : 5 px ;
}
.win_title b {
couleur : #333 ;
marge gauche : 10 px ;
}
.win_title .win_btnblock {
largeur:automatique;
remplissage : 0 5 px ;
flotteur : à droite ;
hauteur : 17 px ;
marge : 4px 3px 0 0 ;
}
.win_title .win_btnblock un {
display:bloc en ligne ;
largeur : 26 px ;
hauteur : 17 px ;
image d'arrière-plan:url(images/windowBtn.png);
répétition d'arrière-plan : pas de répétition ;
flotteur : gauche ;
marge :0 1px ;
contour : aucun ;
}
.winMaximize {
position d'arrière-plan : en bas à droite ;
}
.winMaximize: survol {
position d'arrière-plan : en haut à droite ;
}
.winHyimize {
position d'arrière-plan : -26px en bas ;
}
.winHyimize: survol {
position d'arrière-plan : -26px en haut ;
}
.winFermer {
position d'arrière-plan : -52px en haut ;
}
.winClose : survoler {
position d'arrière-plan : -52px en bas ;
}
.winMinimiser {
position d'arrière-plan : en bas à gauche ;
}
.winMinimize: survoler {
position d'arrière-plan : en haut à gauche ;
}
.winframe {
largeur : 100 % ;
hauteur : auto ;
marge :0 0 0 3px ;
rembourrage : 0
}icônes de bureau
#deskIcône {
largeur : 100 % ;
hauteur : auto ;
débordement : caché ;
zoom:-1 ;
position : relative ;
}
.desktop_icon {
largeur : 86 px ;
hauteur : 88 px ;
curseur:pointeur;
marge gauche : -1000px ;
texte-align:centre;
}
.desktop_icon durée {
affichage:bloc;
}
.desktop_icon .icon {
largeur : 50 px ;
hauteur : 50 px ;
marge : 5px automatique ;
}
.desktop_icon .icon img {
largeur : 50 px ;
hauteur : 50 px ;
}
.desktop_icon .text {
affichage : bloc en ligne ;
largeur:automatique;
hauteur : 22 px ;
hauteur de ligne : 22 px ;
texte-align:centre;
couleur :#fff ;
background:url(images/iconTextbg.png) centre gauche sans répétition ;
position : relative ;
remplissage-gauche : 10px ;
marge droite : 10 px ;
}
.desktop_icon .right_cron {
largeur : 10 px ;
hauteur : 22 px ;
position : absolue ;
à droite : -10 px ;
haut : 0 ;
background:url(images/iconTextbg_right.png) centre gauche sans répétition ;
}
.desktop_icon_over {
background:url(images/icon_over.png) centre sans répétition ;
}?code JS
Il existe de nombreux codes JS. Seule une partie du code JS est présentée ici. Le code source complet peut être obtenu à la fin de l'article.
//Déclarez l'espace du bureau et encapsulez les opérations associées myLib.NS("desktop");
maLib.desktop={
winWH:fonction(){
$('body').data('winWh',{'w':$(window).width(),'h':$(window).height()});
},
panneau de bureau :fonction(){
$('body').data('panneau',{
'barre des tâches' : {
'_this':$('#taskBar'),
'tâche_lb' :$('#tâche_lb')
},
'lrBar' : {
'_this':$('#lr_bar'),
'application_par défaut':$('#application_par défaut'),
'start_block':$('#start_block'),
'start_btn':$('#start_btn'),
'élément_début':$('#élément_début'),
'outils_par défaut' :$('#outils_par défaut')
},
'icône de bureau' : {
'_this':$('#deskIcon'),
'icône' :$('li.desktop_icon')
},
'powered_by':$('a.powered_by')
});
},
getMydata:fonction(){
return $('body').data();
},
sourisXY:fonction(){
var sourisXY=[];
$(document).bind('mousemove',function(e){
sourisXY[0]=e.pageX;
sourisXY[1]=e.pageY;
});
retourner la sourisXY ;
},
contextMenu:function(jqElem,data,menuName,textLimit){
var_this=ce
,mXY=_this.mouseXY();
jqqElem
.smartMenu(données,{
nom : Nom du menu,
limite de texte : limite de texte,
aprèsShow:fonction(){
var menu=$("#smartMenu_"+menuName);
var mesDonnées=myLib.desktop.getMydata(),
wh=myData.winWh;//Obtenir la largeur et la hauteur actuelles du document var menuXY=menu.offset(),menuH=menu.height(),menuW=menu.width();
if(menuXY.top>wh['h']-menuH){
menu.css('top',mXY[1]-menuH-2);
}
if(menuXY.left>wh['w']-menuW){
menu.css('gauche',mXY[0]-menuW-2);
}
}
});
$(document.body).click(function(event){
event.preventDefault();
$.smartMenu.hide();
});
}
}Adresse GitHub : https://github.com/wanghao221/moyu
Ceci conclut cet article sur la mise en œuvre des effets de thème de bureau HTML imitant Windows. Pour plus de contenu HTML imitant le bureau Windows, veuillez rechercher les articles précédents sur downcodes.com ou continuer à parcourir les articles connexes suivants. J'espère que vous en lirez davantage à l'avenir. . Soutenez downcodes.com !