ホーム>Web デザインのチュートリアル>HTMLチュートリアル

HTML のような Windows デスクトップ テーマの特殊効果の実装

著者：Eve Cole 更新時間：2024-12-18 10:31:28

オンラインデモアドレス: https://haiyong.site/win/

✨ プロジェクトの基本構造

ディレクトリ構造は次のとおりです。

 §── 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"/> </スパン>
<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="タスクバー">
<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="海龍" 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>
<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 アカデミー" 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" title="天気"></span> <span id="them_btn" title="テーマ"></span></div>
<div id="start_block"> <a title="start" id="start_btn"></a>
<div id="開始項目">
<ul class="アイテム管理者">
<li><span class="adminImg"></span> 管理者</li>
</ul>
<ul class="アイテム">
<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;
}
フィールドセット、画像 {
	境界線:0;
}
アドレス、キャプション、引用、コード、dfn、em、strong、th、var {
	フォントスタイル:標準;
	フォントの太さ:標準;
}
オル、ウル、リー {
	リストスタイル:なし;
}
キャプション、th {
	テキスト整列:左;
}
h1、h2、h3、h4、h5、h6 {
	フォントサイズ:100%;
	フォントの太さ:標準;
}
q:前、q:後 {
	コンテンツ：";
}
略語、頭字語 {
	境界線:0;
}
* {
	マージン:0;
	パディング:0
}

基本的なページスタイル

/*基本的なページスタイル*/
html {
	オーバーフロー:非表示;
}
体 {
	フォントサイズ: 12px;
	背景:#06C url(wallpapers/menglong2.jpg) スクロール センター センターを繰り返します。
	フォントファミリー: Tahoma、Geneva、サンセリフ;
	マージン:0;
	パディング:0
}
{
	フォントサイズ: 12px;
}
a:リンク{
	テキスト装飾: なし。
	色: #FFF;
}
a: 訪問しました {
	テキスト装飾: なし。
	色: #FFF;
}
a:ホバー{
	テキスト装飾: なし。
	色: #FFF;
}
a:アクティブ {
	テキスト装飾: なし。
	色: #FFF;
}
.corner {/*CSS3 をサポートする高度なブラウザでのみ動作します*/
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	境界半径: 5px;
	-moz-box-shadow: 2px 2px 8px #444;
	-webkit-box-shadow: 2px 2px 8px #444;
	ボックスシャドウ:2px 2px 8px #444;
}
.loading {
	背景:url(images/loading.gif) リピートなし 中央 中央
}

インターフェースのレイアウトスタイル

/*インターフェイスのレイアウト スタイル*/
。搭載 {
	幅:160ピクセル;
	高さ:25ピクセル;
	行の高さ:25px;
	背景:url(images/powered-by.png) 繰り返しなし、左中央;
	色:#CCC;
	テキストインデント:26px;
	表示:ブロック;
	概要：なし。
	位置:絶対;
	右:20ピクセル;
	下:60ピクセル;
}

タスクバーのスタイル

#タスクバー {
	幅:100%;
	高さ:40ピクセル;
	行の高さ:40px;
	位置:絶対;
	右:0;
	下:0;
}
#leftBtn {
	幅:100ピクセル;
	高さ:40ピクセル;
	フロート:左;
	ディスプレイ:なし;
}
#右ボタン {
	幅:100ピクセル;
	高さ:40ピクセル;
	フロート:右;
	ディスプレイ:なし;
}
#左ボタン、#右ボタン {
	表示:ブロック;
	幅:100ピクセル;
	高さ:40ピクセル;
	概要：なし。
	背景画像:url(images/lr_btn.png);
	背景リピート:リピートなし;
}
#leftBtn a {
	背景位置:左上;
}
#rightBtn a {
	背景位置:右上;
}
#leftBtn a:hover {
	背景位置:左下
}
#rightBtn a:hover {
	背景位置:右下
}
#task_lb_wrap {
	高さ:40ピクセル;
	行の高さ:40px;
	オーバーフロー:非表示;
	位置:相対;
}
#タスクポンド {
	幅:自動;
	高さ:自動;
	位置:絶対;
	トップ:0;
	右:0;
}
#task_lb a {
	表示:インラインブロック;
	概要：なし。
	幅:100ピクセル;
	高さ:40ピクセル;
	背景画像:url(images/taskHDBtn.png);
	背景リピート:リピートなし;
	テキスト整列:中央;
	行の高さ:40px;
	フロート:右
}
#タスク_lb .defaultTab {
	背景位置:右上;
	色:#ccc
}
#task_lb .defaultTab:hover {
	背景位置:右下;
}
#task_lb .selectTab {
	背景位置:左上;
	色:#FFF
}
#task_lb .selectTab:hover {
	背景位置:左下
}
#shizhong_btn {
	背景:url(images/timer.png) リピートなし 中央 中央
}
#天気_btn {
	背景:url(images/wheather.png) リピートなし 中央 中央
}
#サウンド_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) 左上を繰り返します。
	z インデックス:90;
	-moz-box-shadow: 0px 3px 15px #444;
	-webkit-box-shadow: 0px 3px 15px #444;
	ボックスシャドウ:0px 3px 15px #444;
	パディングトップ:5px;
}

スタートボタンのスタイル

#スタートブロック {
	幅:73ピクセル;
	高さ:56ピクセル;
	位置:絶対;
	左:0;
	下:-56ピクセル;
	背景: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) リピートなし中央下;
	マージン:4px 自動 0 自動;
	概要：なし。
	z インデックス:501;
	カーソル:ポインタ;
}
#start_btn:ホバー {
	背景位置:中央上部
}

スタートメニューのスタイル

#start_item {
	幅:180ピクセル;
	高さ:自動;
	パディング:5px 0;
	背景: url(images/start_item_bg.png) 繰り返し;
	位置:絶対;
	z インデックス:500;
	左:75ピクセル;
	下:0ピクセル;
	ディスプレイ:なし;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	境界半径: 5px;
	-moz-box-shadow: 2px 2px 5px #444;
	-webkit-box-shadow: 2px 2px 5px #444;
	ボックスシャドウ:2px 2px 5px #444;
}
#スタートアイテム .アイテム {
	幅:100%;
	高さ:自動;
	ボーダートップ:1px ソリッド #999
}
#start_item .item li {
	幅:98%;
	高さ:24ピクセル;
	オーバーフロー:非表示;
	ズーム:-1;
	パディング:6px 0;
	行の高さ:24px;
	マージン: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 10px;
	フロート:左;
}
#start_item .item li b {
	幅:10ピクセル;
	高さ:24ピクセル;
	背景:url(images/item-child.png) リピートなし 中央 中央;
	表示:インラインブロック;
	フロート:右;
	マージン右:10px;
}
#スタートアイテム .sitting_btn {
	背景位置:左 -140px;
}
#スタートアイテム .help_btn {
	背景位置:左 -44px;
}
#スタートアイテム .about_btn {
	背景位置:左 -164px;
}
#start_item .logout_btn {
	背景位置:左 -20px;
}
#start_item .admin {
	border-bottom:1px ソリッド #444;
	パディング:5px 0;
	ボーダートップ:なし;
}
#start_item .item li .adminImg {
	ボーダー:1px ソリッド #E0E0E0;
	背景位置:左 -92px;
	背景色:#FFF;
}

デフォルトのガジェット

#default_tools {
	幅:71ピクセル;
	高さ:自動;
	オーバーフロー:非表示;
	ズーム:-1;
	パディング:5px 0;
	ボーダートップ:1px ソリッド #555;
	マージン:0 自動;
}
#default_tools スパン {
	幅:30ピクセル;
	高さ:30ピクセル;
	表示:インラインブロック;
	マージン:0 0 0 3px;
	カーソル:ポインタ;
	フロート:左;
}

デフォルトのアプリケーション

#デフォルト_アプリ {
	幅:73ピクセル;
	高さ:自動;
	パディング:5px 0;
	位置:相対;
}
#default_app li {
	幅:48ピクセル;
	高さ:48ピクセル;
	オーバーフロー:非表示;
	マージン: 3px 自動;
	パディング:6px;
}
#default_app li 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_セパレート {
	border-bottom:1px ソリッド #d6d5d5;
}

ウィンドウスタイル

.windows {
	最小幅:240ピクセル;
	最小高さ:200ピクセル;
	幅:700ピクセル;
	高さ:560ピクセル;
	位置:絶対;
	ディスプレイ:なし;
	背景色:#E0E0E0;
}
.win_title {
	幅:100%;
	高さ:26ピクセル;
	行の高さ:26px;
	背景:#E0E0E0 url(images/titlebar_bg_cur.png) リピート-x 左中央;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	境界半径: 5px;
}
.win_title b {
	色:#333;
	マージン左:10px;
}
.win_title .win_btnblock {
	幅:自動;
	パディング:0 5px;
	フロート:右;
	高さ:17ピクセル;
	マージン:4px 3px 0 0;
}
.win_title .win_btnblock a {
	表示:インラインブロック;
	幅:26ピクセル;
	高さ:17ピクセル;
	背景画像:url(images/windowBtn.png);
	背景リピート:リピートなし;
	フロート:左;
	マージン:0 1px;
	概要：なし。
}
.winMaximize {
	背景位置:右下;
}
.winMaximize:ホバー {
	背景位置:右上;
}
.winHyimize {
	背景位置:-26px 下;
}
.winHyimize:ホバー {
	背景位置:-26px 上;
}
.winClose {
	背景位置:-52px 上;
}
.winClose:ホバー {
	背景位置:-52px 下;
}
.winMinimize {
	背景位置:左下;
}
.winMinimize:ホバー {
	背景位置:左上;
}
.winframe {
	幅:100%;
	高さ:自動;
	マージン:0 0 0 3px;
	パディング:0
}

デスクトップアイコン

#デスクアイコン {
	幅:100%;
	高さ:自動;
	オーバーフロー:非表示;
	ズーム:-1;
	位置:相対;
}
.desktop_icon {
	幅:86ピクセル;
	高さ:88ピクセル;
	カーソル:ポインタ;
	マージン左:-1000px;
	テキスト整列:中央;
}
.desktop_icon スパン {
	表示:ブロック;
}
.デスクトップ_アイコン .アイコン {
	幅:50ピクセル;
	高さ:50ピクセル;
	マージン:5px 自動;
}
.desktop_icon .icon img {
	幅:50ピクセル;
	高さ:50ピクセル;
}
.desktop_icon .text {
	表示:インラインブロック;
	幅:自動;
	高さ:22ピクセル;
	行の高さ:22px;
	テキスト整列:中央;
	色:#fff;
	背景:url(images/iconTextbg.png) 繰り返しなし、左中央;
	位置:相対;
	パディング左:10px;
	マージン右:10px;
}
.desktop_icon .right_cron {
	幅:10ピクセル;
	高さ:22ピクセル;
	位置:絶対;
	右:-10px;
	トップ:0;
	背景:url(images/iconTextbg_right.png) 左中央 リピートなし;
}
.desktop_icon_over {
	背景:url(images/icon_over.png) リピートなし 中央 中央;
}

JSコード

ここでは JS コードの一部のみを示します。完全なソース コードは記事の最後で入手できます。

 //デスクトップ空間を宣言し、関連する操作をカプセル化します myLib.NS("desktop");
myLib.desktop={
	winWH:function(){
		$('body').data('winWh',{'w':$(window).width(),'h':$(window).height()});
}、
	デスクトップパネル:function(){
		$('body').data('パネル',{
					'タスクバー':{
					'_this':$('#taskBar'),
					'タスク_ポンド':$('#タスク_ポンド')
										}、
					'lrバー':{
					'_this':$('#lr_bar'),
					'default_app':$('#default_app'),
				'start_block':$('#start_block'),
				'start_btn':$('#start_btn'),
					'開始項目':$('#開始項目')、
					'default_tools':$('#default_tools')
							}、				
						'デスクアイコン':{
							'_this':$('#deskIcon'),
							'アイコン':$('li.desktop_icon')
							}、
						'powered_by':$('a.powered_by')
						});
		}、
	getMydata:function(){
		$('body').data() を返します。
		}、
	マウスXY:関数(){
		var マウスXY=[];
		$(document).bind('mousemove',function(e){
			マウスXY[0]=e.pageX;
			マウスXY[1]=e.pageY;
});
		マウスXYを返します。
		}、	
	contextMenu:function(jqElem,data,menuName,textLimit){
		var_this=これ
		,mXY=_this.mouseXY();
		
jqエレム
		.smartMenu(データ,{
名前: メニュー名、
			テキスト制限:テキスト制限、
			afterShow:function(){
				var menu=$("#smartMenu_"+menuName);
				var myData=myLib.desktop.getMydata(),
		wh=myData.winWh;//現在のドキュメントの幅と高さを取得します var menuXY=menu.offset(),menuH=menu.height(),menuW=menu.width();
				if(menuXY.top>wh['h']-menuH){
					menu.css('トップ',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

Windows デスクトップ テーマ効果を模倣した HTML の実装に関するこの記事はこれで終わりです。Windows デスクトップ コンテンツを模倣した関連する HTML については、downcodes.com で以前の記事を検索するか、今後も引き続き以下の関連記事を参照してください。 . ダウンコード.comをサポート！

関連記事