Startseite>Webdesign-Tutorial>HTML-Tutorial

Implementierung von HTML-ähnlichen Windows-Desktop-Design-Spezialeffekten

Autor：Eve Cole Aktualisierungszeit：2024-12-18 10:31:28

Online-Demonstrationsadresse: https://haiyong.site/win/

✨ Grundstruktur des Projekts

Die Verzeichnisstruktur ist wie folgt:

 ├── 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
│ ├── extern
│ ├── jquery-smartMenu
│ ├── Themen
│ └── ui
├──-Symbol
├── Bilder
├── Hintergrundbilder
└── index.html

Fügen Sie hier eine Bildbeschreibung ein

HTML-Code

HTML-Hauptcode:

 <a href="https://haiyong.site" class="powered_by">Unterstützt von haiyong.site Hinweis: Doppelklicken Sie zum Öffnen auf die Desktop-Anwendung</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">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"/>< /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="Tools" path="https://haiyong.site/tools"/></li>
<li id="app3"><img src="icon/icon2.png" title="Kommunikationsgruppe" path="https://app.yinxiang.com/fx/8aa8eb1b-7d45-4793-a160-b990d9da2e75" /></li>
<li id="app4"> <img src="icon/icon3.png" title="Autor kontaktieren" 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="Desktop anzeigen"></span><span id="shizhong_btn" title="Uhr"></span><span id="weather_btn" title="Weather"></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> Admin</li>
</ul>
<ul class="item">
<li><span class="sitting_btn"></span>Systemeinstellungen</li>
<li><span class="help_btn"></span>Nutzungshandbuch <b></b></li>
<li><span class="about_btn"></span>Über uns</li>
<li><span class="logout_btn"></span>System verlassen</li>
</ul>
</div>
</div>
</div>
</div>

? CSS-Code

CSS-Hauptcode:

 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	Rand:0;
	Polsterung:0;
}
Tisch {
	border-collapse:collapse;
	Randabstand:0;
}
fieldset, img {
	Grenze:0;
}
Adresse, Beschriftung, Zitieren, Code, dfn, em, stark, th, var {
	Schriftstil:normal;
	Schriftstärke:normal;
}
ol, ul, li {
	Listenstil:none;
}
Bildunterschrift, th {
	text-align:left;
}
h1, h2, h3, h4, h5, h6 {
	Schriftgröße: 100 %;
	Schriftstärke:normal;
}
q:before, q:after {
	Inhalt:";
}
Abkürzung, Akronym {
	Grenze:0;
}
* {
	Rand:0;
	Polsterung:0
}

Grundlegender Seitenstil

 /*Grundlegender Seitenstil*/
html {
	Überlauf:versteckt;
}
Körper {
	Schriftgröße: 12px;
	Hintergrund:#06C URL(wallpapers/menglong2.jpg) Wiederholen Sie den Bildlauf in der Mitte;
	Schriftfamilie: Tahoma, Geneva, serifenlos;
	Rand:0;
	Polsterung:0
}
A {
	Schriftgröße: 12px;
}
a:link {
	Textdekoration: keine;
	Farbe: #FFF;
}
a:besucht {
	Textdekoration: keine;
	Farbe: #FFF;
}
a:hover {
	Textdekoration: keine;
	Farbe: #FFF;
}
a:aktiv {
	Textdekoration: keine;
	Farbe: #FFF;
}
.corner {/*Funktioniert nur in erweiterten Browsern, die CSS3 unterstützen*/
	-moz-border-radius: 5px;
	-webkit-Grenzradius: 5px;
	Randradius: 5px;
	-moz-box-shadow: 2px 2px 8px #444;
	-webkit-box-shadow: 2px 2px 8px #444;
	box-shadow:2px 2px 8px #444;
}
.loading {
	Hintergrund: URL (images/loading.gif) Keine Wiederholung, Mitte
}

Stil des Schnittstellenlayouts

 /*Interface-Layoutstil*/
.angetrieben von {
	Breite: 160 Pixel;
	Höhe:25px;
	Zeilenhöhe:25px;
	Hintergrund: URL (images/powered-by.png) keine Wiederholung, linke Mitte;
	Farbe: #CCC;
	Texteinzug:26px;
	Anzeige:Block;
	Gliederung: keine;
	Position:absolut;
	rechts:20px;
	unten:60px;
}

Taskleistenstil

 #taskBar {
	Breite: 100 %;
	Höhe:40px;
	Zeilenhöhe:40px;
	Position:absolut;
	rechts:0;
	unten:0;
}
#leftBtn {
	Breite: 100 Pixel;
	Höhe:40px;
	float:left;
	Anzeige:keine;
}
#rightBtn {
	Breite: 100 Pixel;
	Höhe:40px;
	float:right;
	Anzeige:keine;
}
#leftBtn a, #rightBtn a {
	Anzeige:Block;
	Breite: 100 Pixel;
	Höhe:40px;
	Gliederung: keine;
	Hintergrundbild:url(images/lr_btn.png);
	Hintergrundwiederholung:keine Wiederholung;
}
#leftBtn a {
	Hintergrundposition:links oben;
}
#rightBtn a {
	Hintergrundposition:rechts oben;
}
#leftBtn a:hover {
	Hintergrundposition: links unten
}
#rightBtn a:hover {
	Hintergrundposition:rechts unten
}
#task_lb_wrap {
	Höhe:40px;
	Zeilenhöhe:40px;
	Überlauf:versteckt;
	Position:relativ;
}
#task_lb {
	Breite:auto;
	Höhe:auto;
	Position:absolut;
	oben:0;
	rechts:0;
}
#task_lb a {
	display:inline-block;
	Gliederung: keine;
	Breite: 100 Pixel;
	Höhe:40px;
	Hintergrundbild:url(images/taskHdBtn.png);
	Hintergrundwiederholung:keine Wiederholung;
	text-align:center;
	Zeilenhöhe:40px;
	float:richtig
}
#task_lb .defaultTab {
	Hintergrundposition:rechts oben;
	Farbe:#ccc
}
#task_lb .defaultTab:hover {
	Hintergrundposition:rechts unten;
}
#task_lb .selectTab {
	Hintergrundposition:links oben;
	Farbe:#FFF
}
#task_lb .selectTab:hover {
	Hintergrundposition: links unten
}
#shizhong_btn {
	Hintergrund: URL (images/timer.png) Keine Wiederholung, Mitte
}
#weather_btn {
	Hintergrund: URL (images/wheather.png) Keine Wiederholung, Mitte
}
#sound_btn {
	Hintergrund: URL (images/sound_open.png) Keine Wiederholung, Mitte
}
#showZm_btn {
	Hintergrund: URL (images/show-desktop.png) No-Repeat Center Center
}
#them_btn {
	Hintergrund: URL (images/skin.png) Keine Wiederholung in der Mitte
}

Seitliche schwebende Stange

 #lr_bar {
	Breite:73px;
	Höhe:auto;
	Position:absolut;
	links:0;
	oben:30px;
	Hintergrund: URL (images/dock_top.png) Repeat-y links oben;
	Z-Index:90;
	-moz-box-shadow: 0px 3px 15px #444;
	-webkit-box-shadow: 0px 3px 15px #444;
	box-shadow:0px 3px 15px #444;
	padding-top:5px;
}

Stil der Startschaltfläche

 #start_block {
	Breite:73px;
	Höhe:56px;
	Position:absolut;
	links:0;
	unten:-56px;
	Hintergrund:url(images/dock_b.png) no-repeat links unten;
	-moz-box-shadow: 0px 5px 15px #444;
	-webkit-box-shadow: 0px 5px 15px #444;
	box-shadow:0px 5px 15px #444;
}
#start_btn {
	Anzeige:Block;
	Breite:48px;
	Höhe:48px;
	Hintergrund: URL (images/start-btn.png) keine Wiederholung, Mitte unten;
	margin:4px auto 0 auto;
	Gliederung: keine;
	Z-Index:501;
	Cursor:Zeiger;
}
#start_btn:hover {
	Hintergrundposition: Mitte oben
}

Stil des Startmenüs

 #start_item {
	Breite: 180 Pixel;
	Höhe:auto;
	Polsterung:5px 0;
	Hintergrund: url(images/start_item_bg.png) wiederholen;
	Position:absolut;
	Z-Index:500;
	links:75px;
	unten:0px;
	Anzeige:keine;
	-moz-border-radius: 5px;
	-webkit-Grenzradius: 5px;
	Randradius: 5px;
	-moz-box-shadow: 2px 2px 5px #444;
	-webkit-box-shadow: 2px 2px 5px #444;
	box-shadow:2px 2px 5px #444;
}
#start_item .item {
	Breite: 100 %;
	Höhe:auto;
	border-top:1px solide #999
}
#start_item .item li {
	Breite: 98 %;
	Höhe:24px;
	Überlauf:versteckt;
	Zoom: -1;
	Polsterung:6px 0;
	Zeilenhöhe:24px;
	Rand:0 automatisch;
	Farbe:#FFF;
}
#start_item .item li:hover {
	Hintergrund: URL (images/start_item_over.png) Repeat-X links unten;
	Cursor:Zeiger
}
#start_item .item li span {
	display:inline-block;
	Breite:24px;
	Höhe:24px;
	Hintergrundbild:url(images/start_itembtn.png);
	Hintergrundwiederholung:keine Wiederholung;
	Rand:0 10px;
	float:left;
}
#start_item .item li b {
	Breite: 10 Pixel;
	Höhe:24px;
	Hintergrund: URL (images/item-child.png) No-Repeat Center Center;
	display:inline-block;
	float:right;
	Rand rechts: 10 Pixel;
}
#start_item .sitting_btn {
	Hintergrundposition:links -140px;
}
#start_item .help_btn {
	Hintergrundposition:links -44px;
}
#start_item .about_btn {
	Hintergrundposition:links -164px;
}
#start_item .logout_btn {
	Hintergrundposition:links -20px;
}
#start_item .admin {
	border-bottom:1px solid #444;
	Polsterung:5px 0;
	border-top:none;
}
#start_item .item li .adminImg {
	Grenze: 1 Pixel fest #E0E0E0;
	Hintergrundposition:links -92px;
	Hintergrundfarbe:#FFF;
}

Standard-Gadget

 #default_tools {
	Breite:71px;
	Höhe:auto;
	Überlauf:versteckt;
	Zoom: -1;
	Polsterung:5px 0;
	border-top:1px solid #555;
	Rand:0 automatisch;
}
#default_tools span {
	Breite:30px;
	Höhe:30px;
	display:inline-block;
	Rand:0 0 0 3px;
	Cursor:Zeiger;
	float:left;
}

Standardanwendung

 #default_app {
	Breite:73px;
	Höhe:auto;
	Polsterung:5px 0;
	Position:relativ;
}
#default_app li {
	Breite:48px;
	Höhe:48px;
	Überlauf:versteckt;
	margin:3px auto;
	Polsterung:6px;
}
#default_app li img {
	Breite:48px;
	Höhe:48px;
	Cursor:Zeiger;
}
#default_app .btnOver {
	Hintergrund: URL (images/default_appbtn_bg.png) Keine Wiederholung, Mitte
}

Überschreiben Sie den Stil des Rechtsklick-Menüs

 .smart_menu_box .smart_menu_a {
	Farbe:#333
}
.smart_menu_box .smart_menu_li_separate {
	border-bottom:1px solid #d6d5d5;
}

Fensterstil

 .windows {
	Mindestbreite: 240 Pixel;
	Mindesthöhe: 200 Pixel;
	Breite:700px;
	Höhe:560px;
	Position:absolut;
	Anzeige:keine;
	Hintergrundfarbe:#E0E0E0;
}
.win_title {
	Breite: 100 %;
	Höhe:26px;
	Zeilenhöhe:26px;
	Hintergrund:#E0E0E0 url(images/titlebar_bg_cur.png) repeat-x links in der Mitte;
	-moz-border-radius: 5px;
	-webkit-Grenzradius: 5px;
	Randradius: 5px;
}
.win_title b {
	Farbe:#333;
	margin-left:10px;
}
.win_title .win_btnblock {
	Breite:auto;
	Polsterung:0 5px;
	float:right;
	Höhe: 17px;
	Rand:4px 3px 0 0;
}
.win_title .win_btnblock a {
	display:inline-block;
	Breite:26px;
	Höhe: 17px;
	Hintergrundbild:url(images/windowBtn.png);
	Hintergrundwiederholung:keine Wiederholung;
	float:left;
	Rand:0 1px;
	Gliederung: keine;
}
.winMaximize {
	Hintergrundposition:rechts unten;
}
.winMaximize:hover {
	Hintergrundposition:rechts oben;
}
.winHyimize {
	Hintergrundposition:-26px unten;
}
.winHyimize:hover {
	Hintergrundposition:-26px oben;
}
.winClose {
	Hintergrundposition:-52px oben;
}
.winClose:hover {
	Hintergrundposition:-52px unten;
}
.winMinimize {
	Hintergrundposition:links unten;
}
.winMinimize:hover {
	Hintergrundposition:links oben;
}
.winframe {
	Breite: 100 %;
	Höhe:auto;
	Rand:0 0 0 3px;
	Polsterung:0
}

Desktop-Symbole

 #deskIcon {
	Breite: 100 %;
	Höhe:auto;
	Überlauf:versteckt;
	Zoom: -1;
	Position:relativ;
}
.desktop_icon {
	Breite:86px;
	Höhe:88px;
	Cursor:Zeiger;
	margin-left:-1000px;
	text-align:center;
}
.desktop_icon span {
	Anzeige:Block;
}
.desktop_icon .icon {
	Breite:50px;
	Höhe:50px;
	Rand: 5 Pixel automatisch;
}
.desktop_icon .icon img {
	Breite:50px;
	Höhe:50px;
}
.desktop_icon .text {
	display:inline-block;
	Breite:auto;
	Höhe:22px;
	Zeilenhöhe:22px;
	text-align:center;
	Farbe:#fff;
	Hintergrund:url(images/iconTextbg.png) keine Wiederholung links in der Mitte;
	Position:relativ;
	padding-left:10px;
	Rand rechts: 10 Pixel;
}
.desktop_icon .right_cron {
	Breite: 10 Pixel;
	Höhe:22px;
	Position:absolut;
	rechts:-10px;
	oben:0;
	Hintergrund:url(images/iconTextbg_right.png) links in der Mitte, keine Wiederholung;
}
.desktop_icon_over {
	Hintergrund: URL (images/icon_over.png) keine Wiederholung, Mitte; Mitte;
}

? JS-Code

Es gibt viele JS-Codes. Hier wird nur ein Teil des JS-Codes angezeigt. Der vollständige Quellcode ist am Ende des Artikels erhältlich.

 //Deklarieren Sie den Desktop-Bereich und kapseln Sie zugehörige Vorgänge 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')
										},
					'lrBar':{
					'_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'),
							'icon':$('li.desktop_icon')
							},
						'powered_by':$('a.powered_by')
						});
		},
	getMydata:function(){
		return $('body').data();
		},
	mouseXY:function(){
		var mouseXY=[];
		$(document).bind('mousemove',function(e){
			mouseXY[0]=e.pageX;
			mouseXY[1]=e.pageY;
});
		return MouseXY;
		},	
	contextMenu:function(jqElem,data,menuName,textLimit){
		var_this=dieses
		,mXY=_this.mouseXY();
		
jqqElem
		.smartMenu(data,{
Name: Menüname,
			textLimit:textLimit,
			afterShow:function(){
				var menu=$("#smartMenu_"+menuName);
				var myData=myLib.desktop.getMydata(),
		wh=myData.winWh;//Erhalten Sie die aktuelle Breite und Höhe des Dokuments 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('left',mXY[0]-menuW-2);
					}	
				}
});
		$(document.body).click(function(event){
			event.preventDefault();
			$.smartMenu.hide();
						});
		}	
	}

Vollständiger Quellcode-Download

GitHub-Adresse: https://github.com/wanghao221/moyu

Damit ist dieser Artikel über die Implementierung von HTML-Imitierungseffekten für Windows-Desktopthemen abgeschlossen. Weitere verwandte HTML-Inhalte zur Imitation von Windows-Desktop-Inhalten finden Sie in früheren Artikeln auf downcodes.com. Ich hoffe, Sie werden in Zukunft mehr lesen . Unterstützen Sie downcodes.com!

Ähnliche Artikel