Implementasi efek khusus tema desktop Windows seperti HTML

Alamat demonstrasi online: https://haiyong.site/win/

✨ Struktur dasar proyek

Struktur direktorinya adalah sebagai berikut:

 ├── 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
│ ├── eksternal
│ ├── jquery-smartMenu
│ ├── tema
│ └── ui
├── ikon
├── gambar
├── wallpaper
└── indeks.html 

kode HTML

Kode utama HTML:

 <a href="https://haiyong.site" class="power_by">Didukung oleh haiyong.site Catatan: Klik dua kali aplikasi desktop untuk membuka</a>
<ul id="deskIkon">
<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 kelas="kanan_cron"></div>
</div>
</li>
<li class="desktop_icon" id="win11" path="https://juejin.cn/user/2040341402229751"> <span class="icon"><img src="icon/juejin.png"/>< /rentang>
<div class="text">Nugget <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"/>< /rentang>
<div class="text">bilibili
<div kelas="kanan_cron"></div>
</div>
</li>
</ul>
<div id="bilah tugas">
<div id="leftBtn"><a href="#" class="upBtn"></a></div>
<div id="rightBtn"><a href="#" class="downBtn"></a> </div>
<div id="tugas_lb_wrap">
<div id="task_lb"></div>
</div>
</div>
<div id="lr_bar">
<ul id="aplikasi_default">
<li id="app0"><img src="icon/icon1.png" title="haiyong" path="https://haiyong.site/"/></li>
<li id="app2"><img src="icon/icon0.png" title="Alat" path="https://haiyong.site/tools"/></li>
<li id="app3"><img src="icon/icon2.png" title="Grup komunikasi" path="https://app.yinxiang.com/fx/8aa8eb1b-7d45-4793-a160-b990d9da2e75" /></li>
<li id="app4"> <img src="icon/icon3.png" title="Hubungi penulis" 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="Tampilkan desktop"></span><span id="shizhong_btn" title="Jam"></span><span id="weather_btn" title="Cuaca"></span> <span id="them_btn" title="Tema"></span></div>
<div id="start_block"> <a title="Mulai" id="start_btn"></a>
<div id="barang_mulai">
<ul kelas="admin item">
<li><span class="adminImg"></span> Admin</li>
</ul>
<ul kelas="barang">
<li><span class="sitting_btn"></span>Setelan Sistem</li>
<li><span class="help_btn"></span>Panduan Penggunaan <b></b></li>
<li><span class="about_btn"></span>Tentang Kami</li>
<li><span class="logout_btn"></span>Keluar dari sistem</li>
</ul>
</div>
</div>
</div>
</div>

? Kode CSS

Kode utama CSS:

 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, masukan, textarea, p, blockquote, th, td {
	margin:0;
	bantalan:0;
}
meja {
	keruntuhan perbatasan: keruntuhan;
	spasi batas:0;
}
kumpulan bidang, img {
	perbatasan:0;
}
alamat, keterangan, kutipan, kode, dfn, em, kuat, th, var {
	gaya font:normal;
	berat font:normal;
}
ol, ul, li {
	gaya daftar: tidak ada;
}
keterangan, th {
	perataan teks:kiri;
}
h1, h2, h3, h4, h5, h6 {
	ukuran font:100%;
	berat font:normal;
}
q:sebelum, q:setelah {
	isi:";
}
abbr, akronim {
	perbatasan:0;
}
* {
	margin:0;
	bantalan:0
}

Gaya halaman dasar

 /*Gaya halaman dasar*/
html {
	meluap:tersembunyi;
}
tubuh {
	ukuran font: 12 piksel;
	latar belakang:#06C url(wallpapers/menglong2.jpg) ulangi tengah gulir tengah;
	keluarga font: Tahoma, Jenewa, sans-serif;
	margin:0;
	bantalan:0
}
A {
	ukuran font: 12 piksel;
}
a: tautan {
	dekorasi teks: tidak ada;
	warna: #FFF;
}
a: mengunjungi {
	dekorasi teks: tidak ada;
	warna: #FFF;
}
a: arahkan kursor {
	dekorasi teks: tidak ada;
	warna: #FFF;
}
a: aktif {
	dekorasi teks: tidak ada;
	warna: #FFF;
}
.corner {/*Hanya berfungsi di browser tingkat lanjut yang mendukung CSS3*/
	-moz-batas-radius: 5 piksel;
	-radius-perbatasan webkit: 5px;
	radius batas: 5px;
	-moz-kotak-bayangan: 2px 2px 8px #444;
	-webkit-kotak-bayangan: 2px 2px 8px #444;
	bayangan-kotak:2px 2px 8px #444;
}
.memuat {
	background:url(images/loading.gif) pusat pusat tanpa pengulangan
}

Gaya tata letak antarmuka

 /*Gaya tata letak antarmuka*/
.power_by {
	lebar:160 piksel;
	tinggi:25 piksel;
	tinggi garis:25px;
	background:url(images/power-by.png) tanpa pengulangan di tengah kiri;
	warna:#CCC;
	indentasi teks:26px;
	tampilan:blok;
	garis besar: tidak ada;
	posisi:mutlak;
	kanan:20 piksel;
	bawah:60px;
}

gaya bilah tugas

 #bilah tugas {
	lebar:100%;
	tinggi:40 piksel;
	tinggi garis:40px;
	posisi:mutlak;
	kanan:0;
	bawah:0;
}
#kiriBtn {
	lebar:100 piksel;
	tinggi:40 piksel;
	mengapung:kiri;
	tampilan: tidak ada;
}
#kananBtn {
	lebar:100 piksel;
	tinggi:40 piksel;
	mengapung:kanan;
	tampilan: tidak ada;
}
#kiriBtn a, #kananBtn a {
	tampilan:blok;
	lebar:100 piksel;
	tinggi:40 piksel;
	garis besar: tidak ada;
	gambar latar belakang:url(gambar/lr_btn.png);
	latar belakang-ulangi:tidak berulang;
}
#kiriBtn a {
	posisi latar belakang: kiri atas;
}
#kananBtn a {
	posisi latar belakang:kanan atas;
}
#leftBtn a: arahkan kursor {
	posisi latar belakang: kiri bawah
}
#kananBtn a:arahkan {
	posisi latar belakang: kanan bawah
}
#tugas_lb_wrap {
	tinggi:40 piksel;
	tinggi garis:40px;
	meluap:tersembunyi;
	posisi:relatif;
}
#tugas_lb {
	lebar:otomatis;
	tinggi:otomatis;
	posisi:mutlak;
	atas:0;
	kanan:0;
}
#tugas_lb a {
	tampilan: blok sebaris;
	garis besar: tidak ada;
	lebar:100 piksel;
	tinggi:40 piksel;
	gambar latar belakang:url(gambar/tugasHdBtn.png);
	latar belakang-ulangi:tidak berulang;
	perataan teks:tengah;
	tinggi garis:40px;
	mengapung: benar
}
#tugas_lb .defaultTab {
	posisi latar belakang:kanan atas;
	warna:#ccc
}
#task_lb .defaultTab: arahkan kursor {
	posisi latar belakang:kanan bawah;
}
#tugas_lb .pilihTab {
	posisi latar belakang: kiri atas;
	warna:#FFF
}
#task_lb .selectTab:hover {
	posisi latar belakang: kiri bawah
}
#shizhong_btn {
	background:url(images/timer.png) pusat pusat tanpa pengulangan
}
#cuaca_btn {
	background:url(images/wheather.png) pusat pusat tanpa pengulangan
}
#suara_btn {
	background:url(images/sound_open.png) pusat pusat tanpa pengulangan
}
#showZm_btn {
	background:url(images/show-desktop.png) pusat pusat tanpa pengulangan
}
#mereka_btn {
	background:url(images/skin.png) pusat pusat tanpa pengulangan
}

Bilah mengambang samping

 #lr_bar {
	lebar:73 piksel;
	tinggi:otomatis;
	posisi:mutlak;
	kiri:0;
	atas:30 piksel;
	background:url(images/dock_top.png) ulangi-y kiri atas;
	indeks-z:90;
	-moz-kotak-bayangan: 0px 3px 15px #444;
	-webkit-kotak-bayangan: 0px 3px 15px #444;
	bayangan-kotak:0px 3px 15px #444;
	padding-atas:5px;
}

Gaya tombol mulai

 #start_block {
	lebar:73 piksel;
	tinggi:56 piksel;
	posisi:mutlak;
	kiri:0;
	bawah:-56 piksel;
	background:url(images/dock_b.png) tanpa pengulangan di kiri bawah;
	-moz-kotak-bayangan: 0px 5px 15px #444;
	-webkit-kotak-bayangan: 0px 5px 15px #444;
	bayangan-kotak:0px 5px 15px #444;
}
#start_btn {
	tampilan:blok;
	lebar:48 piksel;
	tinggi:48px;
	latar belakang:url(images/start-btn.png) bagian tengah bawah tanpa pengulangan;
	margin:4px otomatis 0 otomatis;
	garis besar: tidak ada;
	indeks-z:501;
	kursor:penunjuk;
}
#start_btn: arahkan kursor {
	posisi latar belakang: tengah atas
}

Gaya menu mulai

 #start_item {
	lebar:180 piksel;
	tinggi:otomatis;
	bantalan:5px 0;
	latar belakang: url(images/start_item_bg.png) ulangi;
	posisi:mutlak;
	indeks-z:500;
	kiri:75 piksel;
	bawah:0 piksel;
	tampilan: tidak ada;
	-moz-batas-radius: 5 piksel;
	-radius-perbatasan webkit: 5px;
	radius batas: 5px;
	-moz-kotak-bayangan: 2px 2px 5px #444;
	-webkit-kotak-bayangan: 2px 2px 5px #444;
	bayangan-kotak:2px 2px 5px #444;
}
#start_item .item {
	lebar:100%;
	tinggi:otomatis;
	batas atas:1 piksel padat #999
}
#start_item .item li {
	lebar:98%;
	tinggi:24 piksel;
	meluap:tersembunyi;
	perbesar:-1;
	bantalan:6px 0;
	tinggi garis:24px;
	margin:0 otomatis;
	warna:#FFF;
}
#start_item .item li:hover {
	latar belakang:url(images/start_item_over.png) ulangi-x kiri bawah;
	kursor:penunjuk
}
#start_item .item li span {
	tampilan: blok sebaris;
	lebar:24 piksel;
	tinggi:24 piksel;
	gambar latar belakang:url(gambar/start_itembtn.png);
	latar belakang-ulangi:tidak berulang;
	margin:0 10 piksel;
	mengapung:kiri;
}
#start_item .item li b {
	lebar:10 piksel;
	tinggi:24 piksel;
	background:url(images/item-child.png) pusat pusat tanpa pengulangan;
	tampilan: blok sebaris;
	mengapung:kanan;
	margin-kanan:10px;
}
#start_item .sitting_btn {
	posisi latar belakang:kiri -140px;
}
#start_item .help_btn {
	posisi latar belakang:kiri -44px;
}
#start_item .about_btn {
	posisi latar belakang:kiri -164px;
}
#start_item .logout_btn {
	posisi latar belakang:kiri -20px;
}
#start_item .admin {
	perbatasan-bawah:1px padat #444;
	bantalan:5px 0;
	perbatasan-atas: tidak ada;
}
#start_item .item li .adminImg {
	batas:1 piksel padat #E0E0E0;
	posisi latar belakang:kiri -92px;
	warna latar:#FFF;
}

gadget bawaan

 #alat_default {
	lebar:71 piksel;
	tinggi:otomatis;
	meluap:tersembunyi;
	perbesar:-1;
	bantalan:5px 0;
	perbatasan-atas:1px padat #555;
	margin:0 otomatis;
}
#default_tools rentang {
	lebar:30 piksel;
	tinggi:30 piksel;
	tampilan: blok sebaris;
	margin:0 0 0 3 piksel;
	kursor:penunjuk;
	mengapung:kiri;
}

Aplikasi bawaan

 #aplikasi_default {
	lebar:73 piksel;
	tinggi:otomatis;
	bantalan:5px 0;
	posisi:relatif;
}
#default_aplikasi li {
	lebar:48 piksel;
	tinggi:48 piksel;
	meluap: tersembunyi;
	margin:3px otomatis;
	bantalan:6 piksel;
}
#default_app li img {
	lebar:48 piksel;
	tinggi:48px;
	kursor:penunjuk;
}
#default_app .btnOver {
	latar belakang:url(images/default_appbtn_bg.png) pusat pusat tanpa pengulangan
}

Ganti gaya menu klik kanan

 .smart_menu_box .smart_menu_a {
	warna:#333
}
.smart_menu_box .smart_menu_li_separate {
	perbatasan-bawah:1px padat #d6d5d5;
}

gaya jendela

 .jendela {
	lebar minimum:240 piksel;
	tinggi minimum:200px;
	lebar:700 piksel;
	tinggi:560 piksel;
	posisi:mutlak;
	tampilan: tidak ada;
	warna latar belakang:#E0E0E0;
}
.win_title {
	lebar:100%;
	tinggi:26 piksel;
	tinggi garis:26px;
	latar belakang:#E0E0E0 url(images/titlebar_bg_cur.png) ulangi-x kiri tengah;
	-moz-batas-radius: 5px;
	-radius-perbatasan webkit: 5px;
	radius batas: 5px;
}
.win_title b {
	warna:#333;
	margin-kiri:10px;
}
.win_title .win_btnblock {
	lebar:otomatis;
	bantalan:0 5 piksel;
	mengapung:kanan;
	tinggi:17 piksel;
	margin:4px 3px 0 0;
}
.win_title .win_btnblock a {
	tampilan: blok sebaris;
	lebar:26 piksel;
	tinggi:17 piksel;
	gambar latar belakang:url(gambar/windowBtn.png);
	latar belakang-ulangi:tidak berulang;
	mengapung:kiri;
	margin:0 1 piksel;
	garis besar: tidak ada;
}
.winMaksimalkan {
	posisi latar belakang:kanan bawah;
}
.winMaximize: arahkan kursor {
	posisi latar belakang:kanan atas;
}
.winHyimize {
	posisi latar belakang: -26px bawah;
}
.winHyimize: arahkan kursor {
	posisi latar belakang: -26px atas;
}
.winTutup {
	posisi latar belakang: -52px atas;
}
.winTutup: arahkan kursor {
	posisi latar belakang: -52px bawah;
}
.winMinimalkan {
	posisi latar belakang: kiri bawah;
}
.winMinimalkan: arahkan kursor {
	posisi latar belakang: kiri atas;
}
.winframe {
	lebar:100%;
	tinggi:otomatis;
	margin:0 0 0 3 piksel;
	bantalan:0
}

ikon desktop

 #deskIkon {
	lebar:100%;
	tinggi:otomatis;
	meluap: tersembunyi;
	perbesar:-1;
	posisi:relatif;
}
.desktop_icon {
	lebar:86 piksel;
	tinggi:88px;
	kursor:penunjuk;
	margin-kiri:-1000 piksel;
	perataan teks:tengah;
}
.desktop_icon rentang {
	tampilan:blok;
}
.desktop_icon .ikon {
	lebar:50 piksel;
	tinggi:50 piksel;
	margin:5px otomatis;
}
.desktop_icon .icon img {
	lebar:50 piksel;
	tinggi:50 piksel;
}
.desktop_icon .teks {
	tampilan: blok sebaris;
	lebar:otomatis;
	tinggi:22 piksel;
	tinggi garis:22px;
	perataan teks:tengah;
	warna:#fff;
	background:url(images/iconTextbg.png) tanpa pengulangan di tengah kiri;
	posisi:relatif;
	padding-kiri:10px;
	margin-kanan:10 piksel;
}
.desktop_icon .right_cron {
	lebar:10 piksel;
	tinggi:22 piksel;
	posisi:mutlak;
	kanan:-10 piksel;
	atas:0;
	background:url(images/iconTextbg_right.png) kiri tengah tanpa pengulangan;
}
.desktop_icon_over {
	background:url(images/icon_over.png) pusat pusat tanpa pengulangan;
}

?

Ada banyak kode JS. Hanya sebagian kode JS yang ditampilkan di sini. Kode sumber selengkapnya dapat diperoleh di akhir artikel.

 //Deklarasikan ruang desktop dan enkapsulasi operasi terkait myLib.NS("desktop");
myLib.desktop={
	menangWH:fungsi(){
		$('body').data('winWh',{'w':$(window).width(),'h':$(window).height()});
},
	desktopPanel:fungsi(){
		$('tubuh').data('panel',{
					'bilah tugas':{
					'_ini':$('#bilah tugas'),
					'tugas_lb':$('#tugas_lb')
										},
					'lrBar':{
					'_ini':$('#lr_bar'),
					'aplikasi_default':$('#aplikasi_default'),
				'start_block':$('#start_block'),
				'mulai_btn':$('#mulai_btn'),
					'item_mulai':$('#item_mulai'),
					'alat_default':$('#alat_default')
							},				
						'Ikon meja':{
							'_ini':$('#ikon meja'),
							'ikon':$('li.desktop_icon')
							},
						'didukung_oleh':$('a.diberdayakan_oleh')
						});
		},
	getMydata:fungsi(){
		kembalikan $('tubuh').data();
		},
	mouseXY:fungsi(){
		var mouseXY=[];
		$(dokumen).bind('mousemove',function(e){
			mouseXY[0]=e.halamanX;
			mouseXY[1]=e.halamanY;
});
		kembalikan mouseXY;
		},	
	konteksMenu:fungsi(jqElem,data,namamenu,Batas teks){
		var_ini=ini
		,mXY=_ini.mouseXY();
		
jqqElem
		.smartMenu(data,{
nama: nama menu,
			Batas teks:Batas teks,
			setelah Pertunjukan:fungsi(){
				var menu=$("#smartMenu_"+Namamenu);
				var myData=myLib.desktop.getMydata(),
		wh=myData.winWh;//Dapatkan lebar dan tinggi dokumen saat ini var menuXY=menu.offset(),menuH=menu.height(),menuW=menu.width();
				if(menuXY.top>wh['h']-menuH){
					menu.css('atas',mXY[1]-menuH-2);
					}
				if(menuXY.kiri>wh['w']-menuW){
					menu.css('kiri',mXY[0]-menuW-2);
					}	
				}
});
		$(document.body).click(function(event){
			acara.preventDefault();
			$.smartMenu.sembunyikan();
						});
		}	
	}

Unduhan kode sumber lengkap

Alamat GitHub: https://github.com/wanghao221/moyu

Ini menyimpulkan artikel ini tentang penerapan HTML yang meniru efek tema desktop Windows. Untuk lebih banyak konten terkait HTML yang meniru konten desktop Windows, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan menelusuri artikel terkait berikut .Dukung downcodes.com!