jquery ui实现windows窗口操作系统桌面及图标打开效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：jquery ui实现windows窗口操作系统桌面及图标打开效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery-ui.css">
  
<style>
html		{ margin:0px; padding:0px; }
body		{ margin:0px; padding:0px; }
div			{ margin:0px; padding:0px; }
span		{ margin:0px; padding:0px; }
ul			{ margin:0px; padding:0px; }
li			{ margin:0px; padding:0px; list-style:none; }
fieldset	{ margin:0px; padding:0px; }
legend		{ margin:0px; padding:0px; }
label		{ margin:0px; padding:0px; }
form		{ margin:0px; padding:0px; }
input		{ margin:0px; padding:0px; outline:none; }
select		{ margin:0px; padding:0px; outline:none;}
option		{ margin:0px; padding:0px; }
textarea	{ margin:0px; padding:0px; outline:none;}
table		{ margin:0px; padding:0px; }
tr			{ margin:0px; padding:0px; }
td			{ margin:0px; padding:0px; }
a			{ margin:0px; padding:0px; }
p			{ margin:0px; padding:0px; }
h1			{ margin:0px; padding:0px; }
h2			{ margin:0px; padding:0px; }
h3			{ margin:0px; padding:0px; }
img			{ margin:0px; padding:0px; border:0px; }

a 			{ color:#333; text-decoration:none; }
a:hover		{ color:#999; text-decoration:none; }
a:active 	{ color:#333; text-decoration:none; }
a:visited 	{ color:#333; text-decoration:none; }

/* ============== CSS Default ============== */

body
{
	font-family:Verdana, Geneva, sans-serif; 
	font-size:12px;
	color:#333;
	background:#FFF;
	overflow-x:hidden;
}

input[type=submit], input[type=button]
{
	background:#CCC;
	background:-webkit-linear-gradient(#FFF, #DDD);
	background:-moz-linear-gradient(#FFF, #DDD);
	background:-o-linear-gradient(#FFF, #DDD);
	
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	
	border:1px #BBB solid;
	border-radius:3px;
	
	padding:4px 12px 4px 12px;
	
	box-shadow:1px 1px 1px rgba(0,0,0,0.1);
	
}

button, input[type=submit], input[type=button], #x:-moz-any-link, x:default 
{
	padding:2px 10px 2px 10px !important;
}

input[type=submit]:disabled, input[type=button]:disabled, 
input[type=submit]:hover:disabled, input[type=button]:hover:disabled, 
input[type=submit]:active:disabled, input[type=button]:active:disabled
{
	background:#CCC;
	background:-webkit-linear-gradient(#FFF, #DDD);
	background:-moz-linear-gradient(#FFF, #DDD);
	background:-o-linear-gradient(#FFF, #DDD);
	
	box-shadow:1px 1px 1px rgba(0,0,0,0.1);
	
	cursor:not-allowed;

	opacity:0.6;
}

input[type=submit]:hover, input[type=button]:hover
{
	background:#DDD;
	background:-webkit-linear-gradient(#FFF, #EEE);
	background:-moz-linear-gradient(#FFF, #EEE);
	background:-o-linear-gradient(#FFF, #EEE);
}

input[type=submit]:active, input[type=button]:active
{
	background:#CCC;
	background:-webkit-linear-gradient(#EEE, #CCC);
	background:-moz-linear-gradient(#EEE, #CCC);
	background:-o-linear-gradient(#EEE, #CCC);
	box-shadow:inset 1px 1px 1px rgba(0,0,0,0.3);
}

input[type=text], input[type=password]
{
	background:#FFF;
	border:1px #BBB solid;
	border-radius:3px;
	
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	
	width:140px;
	
	padding:4px 4px 4px 4px;
	
	box-shadow:inset 1px 1px 3px rgba(0,0,0,0.2);
	
}

input[type=text], input[type=password], #x:-moz-any-link, x:default 
{
	padding:3px !important;
}

input[type=text]:disabled, input[type=password]:disabled, 
input[type=text]:hover:disabled, input[type=password]:hover:disabled, 
input[type=text]:active:disabled, input[type=password]:active:disabled,
select:disabled, textarea:disabled
{
	cursor:not-allowed;
	opacity:0.6;
}

input:focus, select:focus, textarea:focus
{
	border:1px #333 solid;
}

select
{
	border:1px #BBB solid;
	border-radius:3px;
	
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	
	padding:3px 3px 3px 3px;		
}

select, #x:-moz-any-link, x:default 
{
	padding:2px !important;
}

option
{
}

textarea
{	
	border:1px #BBB solid;
	border-radius:3px;
	
	min-width:140px;
	max-width:auto;
	min-height:80px;
	max-height:120px;
	
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	
	resize:vertical;
	
	padding:5px;	
	
	box-shadow:inset 1px 1px 3px rgba(0,0,0,0.2);
}

textarea, #x:-moz-any-link, x:default 
{
	padding:3px !important;
}

#false-button	
{
	position:relative;
	background:#CCC;
	background:-webkit-linear-gradient(#FFF, #DDD);
	background:-moz-linear-gradient(#FFF, #DDD);
	background:-o-linear-gradient(#FFF, #DDD);
	
	border:1px #BBB solid;
	border-radius:3px;
	
	padding:4px 12px 4px 12px;
	
	box-shadow:1px 1px 1px rgba(0,0,0,0.1);
	
	cursor:default;
}

#false-button:hover
{
	background:#DDD;
	background:-webkit-linear-gradient(#FFF, #EEE);
	background:-moz-linear-gradient(#FFF, #EEE);
	background:-o-linear-gradient(#FFF, #EEE);
}

#false-button:active	
{
	background:#CCC;
	background:-webkit-linear-gradient(#EEE, #CCC);
	background:-moz-linear-gradient(#EEE, #CCC);
	background:-o-linear-gradient(#EEE, #CCC);
	box-shadow:inset 1px 1px 1px rgba(0,0,0,0.3);
}

body
{ 
	margin:0px; 
	font-family:Verdana, Geneva, sans-serif;
	overflow:hidden;
}
#wrap
{
	position:absolute; 
	width:100%; 
	height:100%;
	z-index:500;
	display:none;
}
#wrap-window
{
	position:absolute; 
	width:100%; 
	height:100%;
	z-index:53;
	display:none;
}
#loader
{
	position:absolute;
	padding:20px 40px 20px 40px;
	top:50%;
	left:50%;
	margin:-48px 0 0 -68px;
	background:rgba(0,0,0,0.6);
	border-radius:10px;
	box-shadow:0 0 15px rgba(0,0,0,0.7);
	display:none;
	z-index:501;
}
#loader img
{
	width:48px;
}
#centro
{ 
	position:absolute; 
	width:100%; 
	height:100%;
	background:url(//repo.bfw.wiki/bfwrepo/image/5f24e1feda734.png) center;
}
#gradient
{
	position:absolute; 
	width:100%; 
	height:100%;
	background: -webkit-radial-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6));
	background: -moz-radial-gradient(rgba(255,255,255,0), rgba(0,0,0,0.6));
	background: -o-radial-gradient(rgba(255,255,255,0), rgba(0,0,0,0.6));
	background: -ms-radial-gradient(rgba(255,255,255,0), rgba(0,0,0,0.6));
}
#intera
{
	position:absolute;
	top:30px;
	right:30px;
	text-align:center;
	z-index:30;
}
#intera input
{
	padding:8px 8px 8px 8px;
	width:170px;
	background:#333;
	border-top:1px #111 solid;
	border-left:1px #111 solid;
	border-bottom:1px #555 solid;
	border-right:1px #555 solid;
	box-shadow:inset 2px 2px 5px rgba(0,0,0,0.3);
	color:#AAA;
	font-size:14px;
}
#logo-effect
{
	position:absolute; 
	width:600px; 
	height:600px;
	top:50%;
	left:50%;
	margin:-300px 0 0 -300px
}
#logo
{ 
	position:absolute;
	width:600px;
	height:auto;
	top:50%;
	left:50%;
	margin:-120px 0 0 -300px;
	color:#FFF; 
	font-size:100px; 
	font-weight:bold;
	text-align:center;
	text-shadow:0 2px 10px rgba(0,0,0,0.6);
	z-index:5;
}
#logo p
{
	position:relative;
	display:inline-block;
	padding:0px;
	margin:0px;
	cursor:move;
}
#logo p:nth-child(1)	{ top:-200px; left:-100px; opacity:0; }
#logo p:nth-child(2)	{ top:200px; left:100px; opacity:0; }
#logo p:nth-child(3)	{ top:-200px; left:80px; opacity:0; }
#logo p:nth-child(4)	{ top:200px; left:-100px; opacity:0; }
#logo p:nth-child(5)	{ top:-200px; left:100px; opacity:0; }
#logo p:nth-child(6)	{ top:200px; left:80px; opacity:0; }
#logo p:nth-child(7)	{ top:-200px; left:-100px; opacity:0; }
#logo p:nth-child(8)	{ top:200px; left:100px; opacity:0; }
#logo p:nth-child(9)	{ top:200px; left:90px; opacity:0; }
#logo p:nth-child(10)	{ top:200px; left:-100px; opacity:0; }
#logo p:nth-child(11)	{ top:-200px; left:100px; opacity:0; }
#logo p:nth-child(12)	{ top:200px; left:80px; opacity:0; }
#janela
{ 
	position:absolute; 
	width:100px; 
	height:50px;
	padding:44px 7px 7px 7px;
	top:-100px;
	left:-100px;
	background:rgba(255,255,255,0.2);
	border:1px #888 solid;
	border-radius:3px;
	box-shadow:none;
	opacity:0;
	z-index:50;
}
#content
{
	position:relative;
	width:100%;
	height:100%;
	background:#EEE;
}
#cabecalho
{
	position:relative;
	top:-38px;
	padding:10px;
	background: -webkit-linear-gradient(#DDD, #CCC);
	background: -moz-linear-gradient(#DDD, #CCC);
	background: -o-linear-gradient(#DDD, #CCC);
	background: -ms-linear-gradient(#DDD, #CCC);
	margin-bottom:-38px;
	border-bottom:1px #BBB solid;
	color:#666;
	font-weight:bold;
	font-size:14px;
	text-shadow:-0 0 3px #999;
	cursor:default;
	z-index:100;
}
#cabecalho #mini img
{
	position:relative;
	width:64px;
	float:left;
	top:-8px;
	left:-4px;
	padding-right:4px;
	cursor:pointer;
}
#cabecalho #func
{
	position:relative;
	float:right;
	top:-17px;
	right:-2px;
}
#cabecalho #func li
{
	float:left;
	vertical-align:middle;
}
#cabecalho #func img
{
	position:relative;
	width:32px;
	top:-8px;
	padding:0 0px 0 12px;
	cursor:pointer;
}
#conteudo
{
	position:absolute;
	width:100%;
	height:100%;
	padding:0px;
	margin:0px;
}
#content iframe
{
	position:relative;
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	border:none;
	background:#EEE;
	display:none;
}
.ui-resizable-helper
{ 
	border: 1px dotted #CCC;
}
#menu
{
	position:absolute;
	width:100%;
	height:auto;
	text-align:center;
	bottom:0px;
	
	box-shadow:inset 0 3px 15px rgba(0,0,0,0.8), 0 0 15px rgba(255,255,255,0.6);
	background: -webkit-linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.9));
	background: -moz-linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.9));
	background: -o-linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.9));
	background: -ms-linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.9));
	
	z-index:30;
}
#menu ul
{
	position:relative;
	width:704px;
	height:64px;
	margin:0 auto;
	top:0px;
}
#menu li
{
	float:left;
	position:relative;
	cursor:pointer;
	margin:30px 10px 30px 10px;
}
#menu img
{
	position:relative;
	width:48px;
	margin:0px;
	padding:10px;
	border-radius:8px;
	box-shadow:0 1px 3px rgba(0,0,0,0.6);
	
	background: -webkit-linear-gradient(rgba(160,160,160,1) 0%, rgba(100,100,100,1) 3%, rgba(40,40,40,1) 100%);
	background: -moz-linear-gradient(rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 3%, rgba(200,200,200,0.2) 70%);
	background: -o-linear-gradient(rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 3%, rgba(200,200,200,0.2) 70%);
	background: -ms-linear-gradient(rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 3%, rgba(200,200,200,0.2) 70%);
}
</style>


</head>

<body translate="no" >
  <link rel="icon" href="/" type="image/x-icon">
<link rel="shortcut icon" href="/" type="image/x-icon">

<div id="wrap"></div>
<div id="wrap-window"></div>
<div id="loader"><img src="//repo.bfw.wiki/bfwrepo/icon/5f7abfbff367a.gif" alt=""></div>
<div id="centro">

	<div id="intera"><input type="text" name="intera" placeholder="Digite e Pressione Enter" maxlength="12"></div>

    <div id="gradient"></div>

    <div id="logo-effect">
			<div id="logo"><p>W</p><p>e</p><p>b</p><p>D</p><p>e</p><p>s</p><p>k</p></div>
    </div>
      
    <div id="menu">
    <ul id="menu-sort">
        <li class="desenho"><img src="" alt=""></li>
        <li class="diretorio"><img src="//repo.bfw.wiki/bfwrepo/image/5f7ab9dd04c26.png" alt=""></li>
        <li class="video"><img src="//repo.bfw.wiki/bfwrepo/image/5f7aba08caf79.png" alt=""></li>
        <li class="odontograma"><img src="//repo.bfw.wiki/bfwrepo/image/5f7abc91c85cb.png" alt=""></li>
        <li class="webclin"><img src="//repo.bfw.wiki/bfwrepo/image/5f7ab9dd04c26.png" alt=""></li>
        <li class="browser"><img src="//repo.bfw.wiki/bfwrepo/image/5f7ab9dd04c26.png" alt=""></li>
        <li class="jogo"><img src="//repo.bfw.wiki/bfwrepo/image/5f7ab9dd04c26.png" alt=""></li>
        <li class="agenda"><img src="//repo.bfw.wiki/bfwrepo/image/5f7abc91c85cb.png" alt=""></li>
    </ul>
    </div>
    
</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.transform-0.9.3.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.shadow.js"></script>
  
      <script>
$(document).ready(function(){
	
	$('body').disableSelection();
	
	$(window).resize(function(){
		WindowAlign();
	});
		
	var count_win 	= 0;
	var count_clo 	= 0;
	var janela_name = '';
	
	function WindowAlign()
	{
		$(window).width();
		$(window).height();
		
		$('#centro #janela').each(function(i){
			
			if(!$(this).attr('title'))
			{
				if(i<=3)
				{
					posX = 20;
					posY = (220*i)+(($(window).width()/2)-(220+320));
				}
				if(i>3) 
				{
					posX = 260;
					posY = ((220*i)-(220*4))+(($(window).width()/2)-(220+320));
				}
				$(this).animate({
					'top'		:''+posX+'px',
					'left'		:''+posY+'px',
					'width'		:'400px',
					'height'	:'400px'
				},{
					queue		:false,
					duration	:600,
					easing		:'easeOutBack'
				});
			}
			
		});
	}
	
	function WindowFocus(winSel,focusType,buttonFull,focusReturn)
	{
		if(focusType)
		{
			WindowFocus('#centro #janela');
			$(winSel).attr('title','max');
			$(winSel).css({
				'z-index'	:'55',
				'opacity'	:'1'
			}).animate({
				scale		:[1],
				'top'		:$('input[name=win_posY]',winSel).val(),
				'left'		:$('input[name=win_posX]',winSel).val(),
				'width'		:$('input[name=win_sizeX]',winSel).val()+'px',
				'height'	:$('input[name=win_sizeY]',winSel).val()+'px'
			},300,'easeOutBack',function(){
				$(this).draggable('enable').resizable('enable');
				$('#func li',this).show(0,function(){
					if(!buttonFull)	$('.maximize',real_this).hide();
				});
				$('iframe',this).fadeIn(600);
				$(this).animate({boxShadow:'0 0 50px rgba(0,0,0,0.8)'},600);
			});	
		}
		else
		{	
			$(winSel).removeAttr('title');
			$(winSel+' iframe').hide(0,function(){
				$(this).parents('#janela').css({
					'z-index'	: '50',
					'opacity'	: '0.3',
					'box-shadow': 'none'
				}).animate({
					scale 		: [0.5]
				},{
					queue		:false,
					duration	:300,
					easing		:'easeOutBack',
					complete: function(){
						$(this).draggable('disable').resizable('disable');
						$('#func li',this).hide();
						if(!focusReturn) WindowAlign();
					}
				});
			});
		}
	}
		
	function WindowCreate(imgTitle,title,name,content,sizeX,sizeY,resizeEnable,buttonFull)
	{					
		if(!$('#centro #janela[align='+name+']').attr('id'))
		{
			WindowFocus('#centro #janela');
			
			count_win++;
.........完整代码请登录后点击上方下载按钮下载查看