تنفيذ مؤثرات خاصة لسطح مكتب Windows تشبه HTML

عنوان العرض التوضيحي عبر الإنترنت: https://haiyong.site/win/

✨ الهيكل الأساسي للمشروع

هيكل الدليل هو كما يلي:

 ├── jsLib
│ ├── jquery.winResize.js
│ ├── jquery-1.6.2.js
│ ├── مسج-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 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 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 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>
</لي>
</ul>
<div معرف = "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 معرف = "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="الأدوات" مسار ="https://haiyong.site/tools"/></li>
<li id="app3"><img src="icon/icon2.png" title="مسار مجموعة الاتصالات" ="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="الساعة"></span><span id="weather_btn" عنوان = "الطقس"></span> <span id="them_btn" عنوان = "الموضوع"></span></div>
<div id="start_block"> <a title="start" id="start_btn"></a>
<div معرف = "start_item">
<ul class="مشرف العنصر">
<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 الرئيسي:

 الجسم، 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 {
	نمط الخط: عادي؛
	وزن الخط: عادي؛
}
أول، أول، لي {
	نمط القائمة: لا شيء؛
}
التسمية التوضيحية، ث {
	محاذاة النص:يسار؛
}
ح1، ح2، ح3، ح4، ح5، ح6 {
	حجم الخط:100%;
	وزن الخط: عادي؛
}
س: قبل، س: بعد {
	محتوى:"؛
}
أبر، اختصار {
	الحدود:0؛
}
* {
	الهامش:0;
	الحشو: 0
}

نمط الصفحة الأساسي

 /*نمط الصفحة الأساسي*/
أتش تي أم أل {
	تجاوز: مخفي؛
}
جسم {
	حجم الخط: 12 بكسل؛
	الخلفية:#06C url(wallpapers/menglong2.jpg) مركز مركز التمرير المتكرر؛
	عائلة الخط: Tahoma، جنيف، sans-serif؛
	الهامش:0;
	الحشو: 0
}
أ {
	حجم الخط: 12 بكسل؛
}
أ: الرابط {
	زخرفة النص: لا شيء؛
	اللون: #FFF؛
}
أ: زار {
	زخرفة النص: لا شيء؛
	اللون: #FFF؛
}
أ:تحوم {
	زخرفة النص: لا شيء؛
	اللون: #FFF؛
}
أ:نشط {
	زخرفة النص: لا شيء؛
	اللون: #FFF؛
}
.corner {/*يعمل فقط في المتصفحات المتقدمة التي تدعم CSS3*/
	-moz-border-radius: 5px؛
	-webkit-border-radius: 5px؛
	نصف قطر الحدود: 5 بكسل؛
	-moz-box-shadow: 2px 2px 8px #444;
	-webkit-box-shadow: 2px 2px 8px #444;
	مربع الظل: 2px 2px 8px #444؛
}
.تحميل {
	الخلفية:url(images/loading.gif) مركز مركز عدم التكرار
}

نمط تخطيط الواجهة

 /*نمط تخطيط الواجهة*/
.powered_by {
	العرض: 160 بكسل؛
	الارتفاع: 25 بكسل؛
	ارتفاع الخط: 25 بكسل؛
	الخلفية: url(images/powered-by.png) المركز الأيسر بدون تكرار؛
	اللون: #CCC؛
	المسافة البادئة للنص: 26 بكسل؛
	عرض:كتلة؛
	الخطوط العريضة: لا شيء؛
	الموقف:مطلق؛
	اليمين: 20 بكسل؛
	أسفل: 60 بكسل؛
}

نمط شريط المهام

 #شريط المهام {
	العرض: 100%؛
	الارتفاع: 40 بكسل؛
	ارتفاع الخط: 40 بكسل؛
	الموقف:مطلق؛
	حق:0؛
	أسفل:0؛
}
#leftBtn {
	العرض: 100 بكسل؛
	الارتفاع: 40 بكسل؛
	تعويم: يسار؛
	العرض: لا شيء؛
}
#حقBtn {
	العرض: 100 بكسل؛
	الارتفاع: 40 بكسل؛
	تعويم: صحيح؛
	العرض: لا شيء؛
}
#leftBtn a، #rightBtn a {
	عرض:كتلة؛
	العرض: 100 بكسل؛
	الارتفاع: 40 بكسل؛
	الخطوط العريضة: لا شيء؛
	صورة الخلفية:url(images/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(images/taskHdBtn.png);
	تكرار الخلفية: عدم التكرار؛
	محاذاة النص:مركز؛
	ارتفاع الخط: 40 بكسل؛
	تعويم: صحيح
}
#task_lb .defaultTab {
	موضع الخلفية: أعلى اليمين؛
	اللون: #ccc
}
#task_lb .defaultTab:hover {
	موقف الخلفية: أسفل اليمين؛
}
#task_lb .selectTab {
	موضع الخلفية: أعلى اليسار؛
	اللون:#FFF
}
#task_lb .selectTab:hover {
	موقف الخلفية: أسفل اليسار
}
#شيزونغ_btn {
	الخلفية:url(images/timer.png) مركز مركز عدم التكرار
}
#الطقس_btn {
	الخلفية:url(images/wheather.png) مركز مركز عدم التكرار
}
#sound_btn {
	الخلفية:url(images/sound_open.png) مركز مركز عدم التكرار
}
#showZm_btn {
	الخلفية:url(images/show-desktop.png) مركز مركز عدم التكرار
}
#هم_btn {
	الخلفية:url(images/skin.png) مركز مركز عدم التكرار
}

شريط عائم جانبي

 #lr_bar {
	العرض: 73 بكسل؛
	الارتفاع: تلقائي؛
	الموقف:مطلق؛
	اليسار:0؛
	أعلى: 30 بكسل؛
	الخلفية: url(images/dock_top.png) كرر أعلى اليسار؛
	مؤشر ض: 90؛
	-moz-box-shadow: 0px 3px 15px #444;
	-webkit-box-shadow: 0px 3px 15px #444;
	ظل الصندوق:0px 3px 15px #444;
	الحشو العلوي: 5 بكسل؛
}

نمط زر البدء

 #بداية_بلوك {
	العرض: 73 بكسل؛
	الارتفاع: 56 بكسل؛
	الموقف:مطلق؛
	اليسار:0؛
	أسفل:-56px؛
	الخلفية: url(images/dock_b.png) عدم تكرار الجزء السفلي الأيسر؛
	-moz-box-shadow: 0px 5px 15px #444;
	-webkit-box-shadow: 0px 5px 15px #444;
	ظل الصندوق:0px 5px 15px #444;
}
#start_btn {
	عرض:كتلة؛
	العرض: 48 بكسل؛
	الارتفاع: 48 بكسل؛
	الخلفية: url(images/start-btn.png) الجزء السفلي من المنتصف بدون تكرار؛
	الهامش: 4 بكسل تلقائي 0 تلقائي؛
	الخطوط العريضة: لا شيء؛
	مؤشر ض:501؛
	المؤشر:المؤشر؛
}
#start_btn:hover {
	موقف الخلفية: أعلى المركز
}

ابدأ نمط القائمة

 #بدء_العنصر {
	العرض: 180 بكسل؛
	الارتفاع: تلقائي؛
	الحشو: 5 بكسل 0؛
	الخلفية: url(images/start_item_bg.png) كرر؛
	الموقف:مطلق؛
	مؤشر z:500;
	اليسار: 75 بكسل؛
	أسفل: 0 بكسل؛
	العرض: لا شيء؛
	-moz-border-radius: 5px؛
	-webkit-border-radius: 5px؛
	نصف قطر الحدود: 5 بكسل؛
	-moz-box-shadow: 2px 2px 5px #444;
	-webkit-box-shadow: 2px 2px 5px #444;
	ظل الصندوق: 2px 2px 5px #444;
}
#start_item .item {
	العرض: 100%؛
	الارتفاع: تلقائي؛
	الحد العلوي: 1 بكسل صلب #999
}
#start_item .item لي {
	العرض: 98%;
	الارتفاع: 24 بكسل؛
	تجاوز: مخفي؛
	التكبير:-1؛
	الحشو: 6 بكسل 0؛
	ارتفاع الخط: 24 بكسل؛
	الهامش:0 تلقائي؛
	اللون: #FFF؛
}
#start_item .item li:hover {
	الخلفية: url(images/start_item_over.png) كرر-x في الأسفل الأيسر؛
	المؤشر: المؤشر
}
#start_item .item لي سبان {
	عرض: كتلة مضمنة؛
	العرض: 24 بكسل؛
	الارتفاع: 24 بكسل؛
	صورة الخلفية:url(images/start_itembtn.png);
	تكرار الخلفية: عدم التكرار؛
	الهامش: 0 10 بكسل؛
	تعويم: يسار؛
}
#start_item .item لى ب {
	العرض: 10 بكسل؛
	الارتفاع: 24 بكسل؛
	الخلفية:url(images/item-child.png) مركز مركز عدم التكرار؛
	عرض: كتلة مضمنة؛
	تعويم: صحيح؛
	الهامش الأيمن: 10 بكسل؛
}
#start_item .sitting_btn {
	موضع الخلفية: يسار -140 بكسل؛
}
#start_item .help_btn {
	موضع الخلفية: يسار -44 بكسل؛
}
#start_item .about_btn {
	موضع الخلفية: يسار -164 بكسل؛
}
#start_item .logout_btn {
	موضع الخلفية: يسار -20 بكسل؛
}
#start_item .admin {
	الحد السفلي:1px صلب #444؛
	الحشو: 5 بكسل 0؛
	أعلى الحدود: لا شيء؛
}
#start_item .item li .adminImg {
	الحدود: 1 بكسل صلب #E0E0E0؛
	موضع الخلفية: يسار -92 بكسل؛
	لون الخلفية: #FFF؛
}

الأداة الافتراضية

 #الأدوات_الافتراضية {
	العرض: 71 بكسل؛
	الارتفاع: تلقائي؛
	تجاوز: مخفي؛
	التكبير:-1؛
	الحشو: 5 بكسل 0؛
	الحدود العلوية: 1 بكسل صلب #555؛
	الهامش:0 تلقائي؛
}
#default_tools تمتد {
	العرض: 30 بكسل؛
	الارتفاع: 30 بكسل؛
	عرض: كتلة مضمنة؛
	الهامش: 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 {
	الحد السفلي:1px صلب #d6d5d5;
}

نمط النافذة

 .النوافذ {
	الحد الأدنى للعرض: 240 بكسل؛
	الحد الأدنى للارتفاع: 200 بكسل؛
	العرض: 700 بكسل؛
	الارتفاع: 560 بكسل؛
	الموقف:مطلق؛
	العرض: لا شيء؛
	لون الخلفية:#E0E0E0;
}
.win_title {
	العرض: 100%؛
	الارتفاع: 26 بكسل؛
	ارتفاع الخط: 26 بكسل؛
	الخلفية:#E0E0E0 url(images/titlebar_bg_cur.png) تكرار-x في المنتصف الأيسر؛
	-moz-border-radius: 5px؛
	-webkit-border-radius: 5px؛
	نصف قطر الحدود: 5 بكسل؛
}
.win_title ب {
	اللون: #333؛
	الهامش الأيسر: 10 بكسل؛
}
.win_title .win_btnblock {
	العرض: تلقائي؛
	الحشو: 0 5 بكسل؛
	تعويم: صحيح؛
	الارتفاع: 17 بكسل؛
	الهامش: 4 بكسل 3 بكسل 0 0؛
}
.win_title .win_btnblock أ {
	عرض: كتلة مضمنة؛
	العرض: 26 بكسل؛
	الارتفاع: 17 بكسل؛
	صورة الخلفية:url(images/windowBtn.png);
	تكرار الخلفية: عدم التكرار؛
	تعويم: يسار؛
	الهامش: 0 1 بكسل؛
	الخطوط العريضة: لا شيء؛
}
.وين ماكسيميز {
	موقف الخلفية: أسفل اليمين؛
}
.winMaximize:تحوم {
	موضع الخلفية: أعلى اليمين؛
}
.وينهيميز {
	موضع الخلفية: -26 بكسل أسفل؛
}
.winHyimize:تحوم {
	موقف الخلفية:-26px أعلى؛
}
.وين كلوز {
	موقف الخلفية:-52px أعلى؛
}
.winClose:تحوم {
	موضع الخلفية: -52 بكسل أسفل؛
}
.وينمينيميزي {
	موقف الخلفية: أسفل اليسار؛
}
.winMinimize:تحوم {
	موضع الخلفية: أعلى اليسار؛
}
.وينفريم {
	العرض: 100%؛
	الارتفاع: تلقائي؛
	الهامش: 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 .نص {
	عرض: كتلة مضمنة؛
	العرض: تلقائي؛
	الارتفاع: 22 بكسل؛
	ارتفاع الخط: 22 بكسل؛
	محاذاة النص:مركز؛
	اللون: #ففف؛
	الخلفية: 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) مركز مركز عدم التكرار؛
}

كود شبيبة

هناك العديد من أكواد JS. يظهر هنا جزء فقط من كود JS. يمكن الحصول على كود المصدر الكامل في نهاية المقالة.

 // قم بتعريف مساحة سطح المكتب وتغليف العمليات ذات الصلة myLib.NS("desktop");
myLib.desktop={
	وينوه: وظيفة () {
		$('body').data('winWh',{'w':$(window).width(),'h':$(window).height()});
},
	سطح المكتبلوحة:وظيفة(){
		$('body').data('لوحة',{
					"شريط المهام":{
					'_هذا':$('#taskBar')،
					'task_lb':$('#task_lb')
										},
					"لربار":{
					'_هذا':$('#lr_bar'),
					'default_app':$('#default_app'),
				'start_block':$('#start_block'),
				'start_btn':$('#start_btn'),
					'start_item':$('#start_item'),
					'default_tools':$('#default_tools')
							},				
						"رمز المكتب":{
							'_this':$('#deskIcon'),
							'أيقونة':$('li.desktop_icon')
							},
						'powered_by':$('a.powered_by')
						});
		},
	getMydata:function(){
		إرجاع $('body').data();
		},
	ماوسXY:وظيفة(){
		فار mouseXY=[];
		$(مستند).bind('mousemove',function(e){
			mouseXY[0]=e.pageX;
			mouseXY[1]=e.pageY;
});
		إرجاع mouseXY;
		},	
	contextMenu:function(jqElem,data,menuName,textLimit){
		var_this=this
		,mXY=_this.mouseXY();
		
jqElem
		.smartMenu(البيانات،{
الاسم: اسم القائمة،
			حد النص:حد النص،
			افترشو:وظيفة(){
				var Menu=$("#smartMenu_"+menuName);
				فار myData=myLib.desktop.getMydata(),
		wh=myData.winWh;// احصل على عرض وارتفاع المستند الحالي var MenuXY=menu.offset(),menuH=menu.height(),menuW=menu.width();
				إذا (menuXY.top>wh['h']-menuH){
					Menu.css('top',mXY[1]-menuH-2);
					}
				إذا (menuXY.left>wh['w']-menuW){
					Menu.css('left',mXY[0]-menuW-2);
					}	
				}
});
		$(document.body).انقر(وظيفة(حدث){
			Event.preventDefault();
			$.smartMenu.hide();
						});
		}	
	}

تحميل كود المصدر كاملا

عنوان جيثب: https://github.com/wanghao221/moyu

بهذا نختتم هذه المقالة حول تنفيذ تأثيرات سمة سطح مكتب Windows التي تحاكي HTML. لمزيد من المعلومات ذات الصلة التي تحاكي محتوى سطح مكتب Windows، يرجى البحث في المقالات السابقة على موقع downcodes.com أو متابعة تصفح المقالات ذات الصلة التالية، وآمل أن تقرأ المزيد في المستقبل دعم downcodes.com!