Структура каталогов следующая:
├── 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 │ ├── внешний │ ├── jquery-smartMenu │ ├── темы │ └── интерфейс Значок ├── ├── изображения ├── обои └── index.html
HTML-код
Основной код HTML:
<a href="https://haiyong.site" class="powered_by">При поддержке haiyong.site Примечание. Чтобы открыть настольное приложение, дважды щелкните его</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">Хайён <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"/>< /пролет> <div class="text">Наггетсы <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"/>< /пролет> <div class="text">билибили <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="Инструменты" path="https://haiyong.site/tools"/></li> <li id="app3"><img src="icon/icon2.png" title="Группа общения" path="https://app.yinxiang.com/fx/8aa8eb1b-7d45-4793-a160-b990d9da2e75" /></ли> <li id="app4"> <img src="icon/icon3.png" title="Связаться с автором" 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="Показать рабочий стол"></span><span id="shizhong_btn" title="Clock"></span><span id="weather_btn" title="Погода"></span> <span id="them_btn" title="Theme"></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> Администратор</li> </ul> <ul class="item"> <li><span class="sitting_btn"></span>Настройки системы</li> <li><span class="help_btn"></span>Руководство по использованию <b></b></li> <li><span class="about_btn"></span>О нас</li> <li><span class="logout_btn"></span>Выйти из системы</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 {
маржа: 0;
дополнение: 0;
}
стол {
граница-коллапс: коллапс;
расстояние между границами: 0;
}
набор полей, img {
граница: 0;
}
адрес, подпись, ссылка, код, dfn, em, Strong, th, var {
стиль шрифта: нормальный;
вес шрифта: нормальный;
}
ол, ул, ли {
стиль списка: нет;
}
подпись, й {
выравнивание текста: по левому краю;
}
h1, h2, h3, h4, h5, h6 {
размер шрифта: 100%;
вес шрифта: нормальный;
}
q:до, q:после {
содержание:";
}
сокращение, аббревиатура {
граница: 0;
}
* {
маржа: 0;
отступ: 0
}Основной стиль страницы
/*Базовый стиль страницы*/
html {
переполнение: скрыто;
}
тело {
размер шрифта: 12 пикселей;
фон:#06C url(wallpapers/menglong2.jpg) центр повторной прокрутки;
семейство шрифтов: Tahoma, Женева, без засечек;
маржа: 0;
отступ: 0
}
а {
размер шрифта: 12 пикселей;
}
а: ссылка {
текстовое оформление: нет;
цвет: #FFF;
}
а: посетил {
текстовое оформление: нет;
цвет: #FFF;
}
а: наведите {
текстовое оформление: нет;
цвет: #FFF;
}
а: активный {
текстовое оформление: нет;
цвет: #FFF;
}
.corner {/*Работает только в продвинутых браузерах, поддерживающих CSS3*/
-moz-border-radius: 5 пикселей;
-webkit-border-radius: 5 пикселей;
радиус границы: 5 пикселей;
-moz-box-shadow: 2px 2px 8px #444;
-webkit-box-shadow: 2px 2px 8px #444;
box-shadow:2px 2px 8px #444;
}
.загрузка {
фон:url(images/loading.gif) центр без повторов центр
}Стиль оформления интерфейса
/*Стиль макета интерфейса*/
.питаться от {
ширина: 160 пикселей;
высота: 25 пикселей;
высота строки: 25 пикселей;
фон:url(images/powered-by.png) без повтора слева по центру;
цвет:#CCC;
текстовый отступ: 26 пикселей;
дисплей: блок;
контур: нет;
позиция: абсолютная;
справа: 20 пикселей;
внизу: 60 пикселей;
}стиль панели задач
#taskBar {
ширина: 100%;
высота: 40 пикселей;
высота строки: 40 пикселей;
позиция: абсолютная;
правильно: 0;
внизу: 0;
}
#leftBtn {
ширина: 100 пикселей;
высота: 40 пикселей;
плавать: влево;
дисплей: нет;
}
#rightBtn {
ширина: 100 пикселей;
высота: 40 пикселей;
плавать: вправо;
дисплей: нет;
}
#leftBtn a, #rightBtn a {
дисплей: блок;
ширина: 100 пикселей;
высота: 40 пикселей;
контур: нет;
фоновое изображение: URL (изображения/lr_btn.png);
фоновое повторение: без повторения;
}
#leftBtn а {
фоновая позиция: слева вверху;
}
#rightBtn а {
фоновая позиция: справа вверху;
}
#leftBtn a:hover {
позиция фона: слева внизу
}
#rightBtn a:hover {
позиция фона: справа внизу
}
#task_lb_wrap {
высота: 40 пикселей;
высота строки: 40 пикселей;
переполнение: скрыто;
положение: родственник;
}
#task_lb {
ширина: авто;
высота: авто;
позиция: абсолютная;
верх: 0;
правильно: 0;
}
#task_lb а {
дисплей: встроенный блок;
контур: нет;
ширина: 100 пикселей;
высота: 40 пикселей;
фоновое изображение: URL (изображения/taskHdBtn.png);
фоновое повторение: без повторения;
выравнивание текста: по центру;
высота строки: 40 пикселей;
плавать: вправо
}
#task_lb .defaultTab {
фоновая позиция: справа вверху;
цвет: #ccc
}
#task_lb .defaultTab:hover {
фоновая позиция: справа внизу;
}
#task_lb .selectTab {
фоновая позиция: слева вверху;
цвет: #FFF
}
#task_lb .selectTab:hover {
позиция фона: слева внизу
}
#shizhong_btn {
фон:url(images/timer.png) центр без повтора центр
}
#weather_btn {
фон:url(images/wheather.png) центр без повтора центр
}
#sound_btn {
фон:url(images/sound_open.png) центр без повторов
}
#showZm_btn {
фон:url(images/show-desktop.png) центр без повторов
}
#them_btn {
фон:url(images/skin.png) центр без повторов
}Боковая плавающая планка
#lr_bar {
ширина: 73 пикселей;
высота: авто;
позиция: абсолютная;
осталось: 0;
верх: 30 пикселей;
фон:url(images/dock_top.png) повтор-y слева вверху;
z-индекс: 90;
-moz-box-shadow: 0px 3px 15px #444;
-webkit-box-shadow: 0px 3px 15px #444;
box-shadow:0px 3px 15px #444;
отступ-верх: 5 пикселей;
}Стиль кнопки «Пуск»
#start_block {
ширина: 73 пикселей;
высота: 56 пикселей;
позиция: абсолютная;
осталось: 0;
внизу:-56 пикселей;
фон:url(images/dock_b.png) без повтора слева внизу;
-moz-box-shadow: 0px 5px 15px #444;
-webkit-box-shadow: 0px 5px 15px #444;
box-shadow:0px 5px 15px #444;
}
#start_btn {
дисплей: блок;
ширина: 48 пикселей;
высота: 48 пикселей;
фон:url(images/start-btn.png) центральная нижняя часть без повтора;
поле: 4 пикселя авто 0 авто;
контур: нет;
z-индекс: 501;
курсор: указатель;
}
#start_btn:наведите {
фоновая позиция: центр сверху
}Стиль меню «Пуск»
#start_item {
ширина: 180 пикселей;
высота: авто;
отступ: 5 пикселей 0;
фон: URL (изображения/start_item_bg.png) повтор;
позиция: абсолютная;
z-индекс: 500;
слева: 75 пикселей;
внизу: 0 пикселей;
дисплей: нет;
-moz-border-radius: 5 пикселей;
-webkit-border-radius: 5 пикселей;
радиус границы: 5 пикселей;
-moz-box-shadow: 2px 2px 5px #444;
-webkit-box-shadow: 2px 2px 5px #444;
box-shadow:2px 2px 5px #444;
}
#start_item .item {
ширина: 100%;
высота: авто;
border-top:1px сплошной #999
}
#start_item .item li {
ширина: 98%;
высота: 24 пикселей;
переполнение: скрыто;
масштаб:-1;
отступ: 6 пикселей 0;
высота строки: 24 пикселей;
маржа: 0 авто;
цвет: #FFF;
}
#start_item .item li:hover {
фон: URL (изображения/start_item_over.png) повтор-х слева внизу;
курсор:указатель
}
#start_item .item li span {
дисплей: встроенный блок;
ширина: 24 пикселей;
высота: 24 пикселей;
фоновое изображение: URL (изображения/start_itembtn.png);
фоновое повторение: без повторения;
поле: 0 10 пикселей;
плавать: влево;
}
#start_item .item li b {
ширина: 10 пикселей;
высота: 24 пикселей;
фон:url(images/item-child.png) центр без повторов center;
дисплей: встроенный блок;
плавать: вправо;
поле справа: 10 пикселей;
}
#start_item .sitting_btn {
фоновая позиция: слева -140 пикселей;
}
#start_item .help_btn {
фоновая позиция: слева -44 пикселей;
}
#start_item .about_btn {
фоновая позиция: слева -164 пикселей;
}
#start_item .logout_btn {
фоновая позиция: слева -20 пикселей;
}
#start_item .admin {
border-bottom:1px сплошной #444;
отступ: 5 пикселей 0;
граница-верх: нет;
}
#start_item .item li .adminImg {
граница: 1 пиксель, сплошной #E0E0E0;
фоновая позиция: слева -92 пикселей;
цвет фона: #FFF;
}Гаджет по умолчанию
#default_tools {
ширина: 71 пикселей;
высота: авто;
переполнение: скрыто;
масштаб:-1;
отступ: 5 пикселей 0;
border-top:1px сплошной #555;
маржа: 0 авто;
}
#default_tools диапазон {
ширина: 30 пикселей;
высота: 30 пикселей;
дисплей: встроенный блок;
поле: 0 0 0 3 пикселя;
курсор: указатель;
плавать: влево;
}Приложение по умолчанию
#default_app {
ширина: 73 пикселей;
высота: авто;
отступ: 5 пикселей 0;
положение: родственник;
}
#default_app ли {
ширина: 48 пикселей;
высота: 48 пикселей;
переполнение: скрыто;
поле: 3 пикселя авто;
отступ: 6 пикселей;
}
#default_app ли img {
ширина: 48 пикселей;
высота: 48 пикселей;
курсор: указатель;
}
#default_app .btnOver {
фон:url(images/default_appbtn_bg.png) центр без повторов
}Переопределить стиль контекстного меню
.smart_menu_box .smart_menu_a {
цвет:#333
}
.smart_menu_box .smart_menu_li_separate {
border-bottom:1px сплошной #d6d5d5;
}стиль окна
.окна {
минимальная ширина: 240 пикселей;
минимальная высота: 200 пикселей;
ширина: 700 пикселей;
высота: 560 пикселей;
позиция: абсолютная;
дисплей: нет;
цвет фона:#E0E0E0;
}
.win_title {
ширина: 100%;
высота: 26 пикселей;
высота строки: 26 пикселей;
фон:#E0E0E0 url(images/titlebar_bg_cur.png) повтор-x слева по центру;
-moz-border-radius: 5 пикселей;
-webkit-border-radius: 5 пикселей;
радиус границы: 5 пикселей;
}
.win_title б {
цвет: #333;
поле слева: 10 пикселей;
}
.win_title .win_btnblock {
ширина: авто;
отступ: 0 5 пикселей;
плавать: вправо;
высота: 17 пикселей;
поле: 4 пикселя 3 пикселя 0 0;
}
.win_title .win_btnblock {
дисплей: встроенный блок;
ширина: 26 пикселей;
высота: 17 пикселей;
фоновое изображение: URL (изображения/windowBtn.png);
фоновое повторение: без повторения;
плавать: влево;
поле:0 1px;
контур: нет;
}
.winMaximize {
фоновая позиция: справа внизу;
}
.winMaximize:hover {
фоновая позиция: справа вверху;
}
.winHyimize {
фоновая позиция: -26 пикселей внизу;
}
.winHyimize:hover {
фоновая позиция:-26 пикселей сверху;
}
.winClose {
фоновая позиция:-52px сверху;
}
.winClose:hover {
фоновая позиция: -52 пикселей внизу;
}
.winMinimize {
фоновая позиция: слева внизу;
}
.winMinimize:hover {
фоновая позиция: слева вверху;
}
.winframe {
ширина: 100%;
высота: авто;
поле: 0 0 0 3 пикселя;
отступ: 0
}значки на рабочем столе
#deskIcon {
ширина: 100%;
высота: авто;
переполнение: скрыто;
масштаб:-1;
положение: родственник;
}
.desktop_icon {
ширина: 86 пикселей;
высота: 88 пикселей;
курсор: указатель;
поле слева:-1000 пикселей;
выравнивание текста: по центру;
}
.desktop_icon интервал {
дисплей: блок;
}
.desktop_icon .icon {
ширина: 50 пикселей;
высота: 50 пикселей;
поле: 5 пикселей авто;
}
.desktop_icon .icon img {
ширина: 50 пикселей;
высота: 50 пикселей;
}
.desktop_icon .text {
дисплей: встроенный блок;
ширина: авто;
высота: 22 пикселей;
высота строки: 22 пикселей;
выравнивание текста: по центру;
цвет: #fff;
фон:url(images/iconTextbg.png) без повтора слева по центру;
положение: родственник;
отступ слева: 10 пикселей;
поле справа: 10 пикселей;
}
.desktop_icon .right_cron {
ширина: 10 пикселей;
высота: 22 пикселей;
позиция: абсолютная;
справа: -10 пикселей;
верх: 0;
фон:url(images/iconTextbg_right.png) слева по центру, без повтора;
}
.desktop_icon_over {
фон:url(images/icon_over.png) центр без повторов center;
}JS-код
Существует множество JS-кодов. Здесь показана только часть JS-кода. Полный исходный код можно получить в конце статьи.
//Объявляем пространство рабочего стола и инкапсулируем связанные операции myLib.NS("desktop");
myLib.desktop={
WinWH: функция () {
$('body').data('winWh',{'w':$(window).width(),'h':$(window).height()});
},
DesktopPanel: функция () {
$('тело').data('панель',{
'taskBar':{
'_this':$('#taskBar'),
'task_lb':$('#task_lb')
},
'лрБар':{
'_this':$('#lr_bar'),
'default_app':$('#default_app'),
'start_block':$('#start_block'),
'start_btn':$('#start_btn'),
'start_item':$('#start_item'),
'default_tools':$('#default_tools')
},
'deskIcon':{
'_this':$('#deskIcon'),
'значок':$('li.desktop_icon')
},
'powered_by':$('a.powered_by')
});
},
getMydata: функция() {
вернуть $('body').data();
},
мышьXY: функция() {
вар mouseXY=[];
$(document).bind('mousemove',function(e){
mouseXY[0]=e.pageX;
mouseXY[1]=e.pageY;
});
вернуть мышьXY;
},
contextMenu: функция (jqElem, данные, имя меню, textLimit) {
var_this=это
,mXY=_this.mouseXY();
jqElem
.smartMenu(данные,{
имя: имя меню,
textLimit:textLimit,
afterShow: функция() {
var меню = $("#smartMenu_"+menuName);
вар myData=myLib.desktop.getMydata(),
wh=myData.winWh;//Получаем текущую ширину и высоту документа varmenuXY=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('left',mXY[0]-menuW-2);
}
}
});
$(document.body).click(function(event){
событие.preventDefault();
$.smartMenu.hide();
});
}
}Адрес GitHub: https://github.com/wanghao221/moyu.
На этом завершается статья о реализации HTML-эффектов, имитирующих темы рабочего стола Windows. Для получения дополнительных сведений об HTML, имитирующих содержимое рабочего стола Windows, выполните поиск по предыдущим статьям на сайте downcodes.com или продолжайте просматривать следующие статьи по теме. Надеюсь, вы прочитаете больше в будущем. Поддержите downcodes.com!