利用jquery实现模拟windows桌面



51 201 68



特效描述:利用jquery实现 模拟windows桌面,利用jquery实现模拟windows桌面

代码结构

1. 引入CSS

<link rel="stylesheet" href="assets/stylesheets/html.css" />
<link rel="stylesheet" href="assets/stylesheets/desktop.css" />
<link rel="stylesheet" href="assets/stylesheets/ie.css" />

2. 引入JS

<script src="assets/javascripts/jquery.js"></script>
<script src="assets/javascripts/jquery.ui.js"></script>
<script src="assets/javascripts/jquery.desktop.js"></script>

3. HTML代码

<div class="abs" id="wrapper">
	<div class="abs" id="desktop">
		<a class="abs icon" style="left:20px;top:20px;" href="#icon_dock_computer">
			<img src="assets/images/icons/icon_32_computer.png" />
			Computer
		</a>
		<a class="abs icon" style="left:20px;top:100px;" href="#icon_dock_drive">
			<img src="assets/images/icons/icon_32_drive.png" />
			Hard Drive
		</a>
		<a class="abs icon" style="left:20px;top:180px;" href="#icon_dock_disc">
			<img src="assets/images/icons/icon_32_disc.png" />
			Audio CD
		</a>
		<a class="abs icon" style="left:20px;top:260px;" href="#icon_dock_network">
			<img src="assets/images/icons/icon_32_network.png" />
			Network
		</a>
		<div id="window_computer" class="abs window">
			<div class="abs window_inner">
				<div class="window_top">
					<span class="float_left">
						<img src="assets/images/icons/icon_16_computer.png" />
						Computer
					</span>
					<span class="float_right">
						<a href="#" class="window_min"></a>
						<a href="#" class="window_resize"></a>
						<a href="#icon_dock_computer" class="window_close"></a>
					</span>
				</div>
				<div class="abs window_content">
					<div class="window_aside">
						Hello. You look nice today!
					</div>
					<div class="window_main">
						<table class="data">
							<thead>
								<tr>
									<th class="shrink">&nbsp;
									</th>
									<th>
										Name
									</th>
									<th>
										Date Modified
									</th>
									<th>
										Date Created
									</th>
									<th>
										Size
									</th>
									<th>
										Kind
									</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_drive.png" />
									</td>
									<td>
										Hard Drive
									</td>
									<td>
										Today
									</td>
									<td>
										&mdash;
									</td>
									<td>
										200 GB
									</td>
									<td>
										Volume
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_disc.png" />
									</td>
									<td>
										Audio CD
									</td>
									<td>
										&mdash;
									</td>
									<td>
										&mdash;
									</td>
									<td>
										2.92 GB
									</td>
									<td>
										Media
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_network.png" />
									</td>
									<td>
										Network
									</td>
									<td>
										&mdash;
									</td>
									<td>
										&mdash;
									</td>
									<td>
										&mdash;
									</td>
									<td>
										LAN
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_folder_remote.png" />
									</td>
									<td>
										Shared Project Files
									</td>
									<td>
										Yesterday
									</td>
									<td>
										12/29/08
									</td>
									<td>
										524 MB
									</td>
									<td>
										Folder
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_documents.png" />
									</td>
									<td>
										Documents
									</td>
									<td>
										Yesterday
									</td>
									<td>
										12/29/08
									</td>
									<td>
										524 MB
									</td>
									<td>
										Folder
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_system.png" />
									</td>
									<td>
										Preferences
									</td>
									<td>
										&mdash;
									</td>
									<td>
										&mdash;
									</td>
									<td>
										&mdash;
									</td>
									<td>
										System
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_trash.png" />
									</td>
									<td>
										Trash
									</td>
									<td>
										Today
									</td>
									<td>
										&mdash;
									</td>
									<td>
										&mdash;
									</td>
									<td>
										Bin
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="abs window_bottom">
					Build: TK421
				</div>
			</div>
			<span class="abs ui-resizable-handle ui-resizable-se"></span>
		</div>
		<div id="window_drive" class="abs window">
			<div class="abs window_inner">
				<div class="window_top">
					<span class="float_left">
						<img src="assets/images/icons/icon_16_drive.png" />
						Hard Drive
					</span>
					<span class="float_right">
						<a href="#" class="window_min"></a>
						<a href="#" class="window_resize"></a>
						<a href="#icon_dock_drive" class="window_close"></a>
					</span>
				</div>
				<div class="abs window_content">
					<div class="window_aside">
						Storage in use: 119.1 GB
					</div>
					<div class="window_main">
						<table class="data">
							<thead>
								<tr>
									<th class="shrink">&nbsp;
									</th>
									<th>
										Name
									</th>
									<th>
										Date Modified
									</th>
									<th>
										Date Created
									</th>
									<th>
										Size
									</th>
									<th>
										Kind
									</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_page.png" />
									</td>
									<td>
										.DS_Store
									</td>
									<td>
										Yesterday
									</td>
									<td>
										&mdash;
									</td>
									<td>
										6 KB
									</td>
									<td>
										Hidden
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_folder_home.png" />
									</td>
									<td>
										Default User
									</td>
									<td>
										Today
									</td>
									<td>
										&mdash;
									</td>
									<td>
										&mdash;
									</td>
									<td>
										Folder
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_folder.png" />
									</td>
									<td>
										Applications
									</td>
									<td>
										Yesterday
									</td>
									<td>
										&mdash;
									</td>
									<td>
										&mdash;
									</td>
									<td>
										Folder
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_folder.png" />
									</td>
									<td>
										Developer
									</td>
									<td>
										12/29/08
									</td>
									<td>
										&mdash;
									</td>
									<td>
										&mdash;
									</td>
									<td>
										Folder
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_folder.png" />
									</td>
									<td>
										Library
									</td>
									<td>
										09/11/09
									</td>
									<td>
										&mdash;
									</td>
									<td>
										&mdash;
									</td>
									<td>
										Folder
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_folder.png" />
									</td>
									<td>
										System
									</td>
									<td>
										Yesterday
									</td>
									<td>
										&mdash;
									</td>
									<td>
										&mdash;
									</td>
									<td>
										Folder
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="abs window_bottom">
					Free: 80.9 GB
				</div>
			</div>
			<span class="abs ui-resizable-handle ui-resizable-se"></span>
		</div>
		<div id="window_disc" class="abs window">
			<div class="abs window_inner">
				<div class="window_top">
					<span class="float_left">
						<img src="assets/images/icons/icon_16_disc.png" />
						Audio CD - Title of Album
					</span>
					<span class="float_right">
						<a href="#" class="window_min"></a>
						<a href="#" class="window_resize"></a>
						<a href="#icon_dock_disc" class="window_close"></a>
					</span>
				</div>
				<div class="abs window_content">
					<div class="window_aside align_center">
						<img src="assets/images/misc/album_cover.jpg" />
						<br />
						<em>Title of Album</em>
					</div>
					<div class="window_main">
						<table class="data">
							<thead>
								<tr>
									<th class="shrink">&nbsp;
									</th>
									<th class="shrink">
										Track
									</th>
									<th>
										Song Name
									</th>
									<th class="shrink">
										Length
									</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_music.png" />
									</td>
									<td class="align_center">
										01
									</td>
									<td>
										Track One
									</td>
									<td class="align_right">
										3:50
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_music.png" />
									</td>
									<td class="align_center">
										02
									</td>
									<td>
										Track Two
									</td>
									<td class="align_right">
										3:50
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_music.png" />
									</td>
									<td class="align_center">
										03
									</td>
									<td>
										Track Three
									</td>
									<td class="align_right">
										4:02
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_music.png" />
									</td>
									<td class="align_center">
										04
									</td>
									<td>
										Track Four
									</td>
									<td class="align_right">
										3:47
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_music.png" />
									</td>
									<td class="align_center">
										05
									</td>
									<td>
										Track Five
									</td>
									<td class="align_right">
										4:38
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_music.png" />
									</td>
									<td class="align_center">
										06
									</td>
									<td>
										Track Six
									</td>
									<td class="align_right">
										3:16
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_music.png" />
									</td>
									<td class="align_center">
										07
									</td>
									<td>
										Track Seven
									</td>
									<td class="align_right">
										3:53
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_music.png" />
									</td>
									<td class="align_center">
										08
									</td>
									<td>
										Track Eight
									</td>
									<td class="align_right">
										1:41
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_music.png" />
									</td>
									<td class="align_center">
										09
									</td>
									<td>
										Track Nine
									</td>
									<td class="align_right">
										3:40
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_music.png" />
									</td>
									<td class="align_center">
										10
									</td>
									<td>
										Track Ten
									</td>
									<td class="align_right">
										4:33
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_music.png" />
									</td>
									<td class="align_center">
										11
									</td>
									<td>
										Track Eleven
									</td>
									<td class="align_right">
										3:49
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_music.png" />
									</td>
									<td class="align_center">
										12
									</td>
									<td>
										Track Twelve
									</td>
									<td class="align_right">
										1:11
									</td>
								</tr>
								<tr>
									<td class="shrink">
										<img src="assets/images/icons/icon_16_music.png" />
									</td>
									<td class="align_center">
										13
									</td>
									<td>
										Track Thirteen
									</td>
									<td class="align_right">
										6:17
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="abs window_bottom">
					Genre: Rock/Rap
				</div>
			</div>
			<span class="abs ui-resizable-handle ui-resizable-se"></span>
		</div>
		<div id="window_network" class="abs window">
			<div class="abs window_inner">
				<div class="window_top">
					<span class="float_left">
						<img src="assets/images/icons/icon_16_network.png" />
						Network
					</span>
					<span class="float_right">
						<a href="#" class="window_min"></a>
						<a href="#" class="window_resize"></a>
						<a href="#icon_dock_network" class="window_close"></a>
					</span>
				</div>
				<div class="abs window_content">
					<div class="window_aside">
						Local Network Resources
					</div>
					<div class="window_main">
						<table class="data">
							<thead>
								<tr>
									<th class="shrink">&nbsp;
									</th>
									<th>
										Name
									</th>
									<th class="shrink">
										Operating System
									</th>
									<th class="shrink">
										Version
									</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_server.png" />
									</td>
									<td>
										Urban Terror - <em>Game Server</em>
									</td>
									<td>
										Linux
									</td>
									<td>
										Ubuntu
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_folder_remote.png" />
									</td>
									<td>
										Shared Project Files
									</td>
									<td>
										Linux
									</td>
									<td>
										Red Hat
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_vpn.png" />
									</td>
									<td>
										Remote Desktop VPN
									</td>
									<td>
										Windows
									</td>
									<td>
										XP
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_computer.png" />
									</td>
									<td>
										Michael Scott
									</td>
									<td>
										Mac OS
									</td>
									<td>
										10.5
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_computer.png" />
									</td>
									<td>
										Dwight Schrute
									</td>
									<td>
										Mac OS
									</td>
									<td>
										10.6
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_computer.png" />
									</td>
									<td>
										Jim Halpert
									</td>
									<td>
										Mac OS
									</td>
									<td>
										10.6
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_computer.png" />
									</td>
									<td>
										Pam Beesly
									</td>
									<td>
										Mac OS
									</td>
									<td>
										10.5
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_computer.png" />
									</td>
									<td>
										Ryan Howard
									</td>
									<td>
										Mac OS
									</td>
									<td>
										10.5
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_computer.png" />
									</td>
									<td>
										Jan Levinson
									</td>
									<td>
										Mac OS
									</td>
									<td>
										10.5
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_computer.png" />
									</td>
									<td>
										Roy Anderson
									</td>
									<td>
										Windows
									</td>
									<td>
										7
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_computer.png" />
									</td>
									<td>
										Stanley Hudson
									</td>
									<td>
										Windows
									</td>
									<td>
										Vista
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_computer.png" />
									</td>
									<td>
										Kevin Malone
									</td>
									<td>
										Windows
									</td>
									<td>
										Vista
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_computer.png" />
									</td>
									<td>
										Angela Martin
									</td>
									<td>
										Windows
									</td>
									<td>
										Vista
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_computer.png" />
									</td>
									<td>
										Oscar Martinez
									</td>
									<td>
										Windows
									</td>
									<td>
										Vista
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_computer.png" />
									</td>
									<td>
										Phyllis Lapin
									</td>
									<td>
										Windows
									</td>
									<td>
										Vista
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_computer.png" />
									</td>
									<td>
										Creed Bratton
									</td>
									<td>
										Windows
									</td>
									<td>
										7
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_computer.png" />
									</td>
									<td>
										Meredith Palmer
									</td>
									<td>
										Windows
									</td>
									<td>
										Vista
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_computer.png" />
									</td>
									<td>
										Toby Flenderson
									</td>
									<td>
										Windows
									</td>
									<td>
										Vista
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_computer.png" />
									</td>
									<td>
										Darryl Philbin
									</td>
									<td>
										Windows
									</td>
									<td>
										Vista
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_computer.png" />
									</td>
									<td>
										Kelly Kapoor
									</td>
									<td>
										Windows
									</td>
									<td>
										Vista
									</td>
								</tr>
								<tr>
									<td>
										<img src="assets/images/icons/icon_16_computer.png" />
									</td>
									<td>
										Andy Bernard
									</td>
									<td>
										Windows
									</td>
									<td>
										Vista
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="abs window_bottom">
					LAN: Corporate Intranet
				</div>
			</div>
			<span class="abs ui-resizable-handle ui-resizable-se"></span>
		</div>
	</div>
	<div class="abs" id="bar_top">
		<span class="float_right" id="clock"></span>
		<ul>
			<li>
				<a class="menu_trigger" href="#">jQuery Desktop</a>
				<ul class="menu">
					<li>
						<a href="http://51qianduan.com/">jQuery Cookbook</a>
					</li>
					<li>
						<a href="http://51qianduan.com/">jQuery Enlightenment</a>
					</li>
					<li>
						<a href="http://51qianduan.com/">jQuery Home</a>
					</li>
					<li>
						<a href="http://51qianduan.com/">jQuery Mobile</a>
					</li>
					<li>
						<a href="http://51qianduan.com/">jQuery UI</a>
					</li>
					<li>
						<a href="http://51qianduan.com/">Learning jQuery</a>
					</li>
				</ul>
			</li>
			<li>
				<a class="menu_trigger" href="#">HTML5 Resources</a>
				<ul class="menu">
					<li>
						<a href="http://51qianduan.com/">Dive Into HTML5</a>
					</li>
					<li>
						<a href="http://51qianduan.com/">Get Ready for HTML5</a>
					</li>
					<li>
						<a href="http://51qianduan.com/">HTML5 Boilerplate</a>
					</li>
					<li>
						<a href="http://51qianduan.com/">HTML5 Doctor</a>
					</li>
					<li>
						<a href="http://51qianduan.com/">HTML5 Intro</a>
					</li>
					<li>
						<a href="http://51qianduan.com/">HTML5 Super Friends</a>
					</li>
				</ul>
			</li>
			<li>
				<a class="menu_trigger" href="#">Code</a>
				<ul class="menu">
					<li>
						<a href="assets/stylesheets/desktop.css">Desktop - CSS</a>
					</li>
					<li>
						<a href="assets/javascripts/jquery.desktop.js">Desktop - JavaScript</a>
					</li>
					<li>
						<a href="http://51qianduan.com/">GitHub Repository</a>
					</li>
				</ul>
			</li>
			<li>
				<a class="menu_trigger" href="#">Credits</a>
				<ul class="menu">
					<li>
						<a href="http://51qianduan.com/">Demo built by Nathan Smith</a>
					</li>
					<li>
						<a href="http://51qianduan.com/">Wallpaper by Adrian Rodriguez</a>
					</li>
					<li>
						<a href="http://51qianduan.com/">Icons - Tango Desktop Project</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<div class="abs" id="bar_bottom">
		<a class="float_left" href="#" id="show_desktop" title="Show Desktop">
			<img src="assets/images/icons/icon_22_desktop.png" />
		</a>
		<ul id="dock">
			<li id="icon_dock_computer">
				<a href="#window_computer">
					<img src="assets/images/icons/icon_22_computer.png" />
					Computer
				</a>
			</li>
			<li id="icon_dock_drive">
				<a href="#window_drive">
					<img src="assets/images/icons/icon_22_drive.png" />
					Hard Drive
				</a>
			</li>
			<li id="icon_dock_disc">
				<a href="#window_disc">
					<img src="assets/images/icons/icon_22_disc.png" />
					Audio CD
				</a>
			</li>
			<li id="icon_dock_network">
				<a href="#window_network">
					<img src="assets/images/icons/icon_22_network.png" />
					Network
				</a>
			</li>
		</ul>
		<a class="float_right" href="http://51qianduan.com/" title="Secure Hosting">
			<img src="assets/images/misc/firehost.png" />
		</a>	
	</div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片拖动 二级导航菜单 文字拖动 下拉导航菜单 拖动排序 竖直导航菜单 图标导航菜单 弹出层拖动 固定导航菜单 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 拖动拽动 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到