注：需要引入Jquery

如果需要全部功能，请引入jquery-ui和jquery-ui.css

截图：

js代码：

 

$(function() {		//菜单列表	var menu_list=$(".menu-list");		//工作区	var working=$(".working");		working.click(function() {		menu_list.hide();		$(".content-menu").hide("slow");	});		//菜单图标单击	$(".menu").bind("click",function() {		menu_list.show();			});	arrange();		$(window).resize(function() {		arrange();	});		//屏蔽右键菜单	$(document).contextmenu(function() {		return false;	});		//点击工作区的时候 显示右键菜单	$(".working").contextmenu(function(event) {			var x=event.clientX;		var y=event.clientY;		var menu=$(".content-menu");				//判断坐标		var width=document.body.clientWidth;		var height=document.body.clientHeight;				x=(x+menu.width())>=width?width-menu.width():x;		y=(y+menu.height())>=height-40?height-menu.height():y;				//alert("可视高度："+height+",鼠标高度："+y);		menu.css("top",y);		menu.css("left",x);		menu.show();					});		//content-menu	$(".content-menu ul li").click(function() {		var text=$(this).text();				switch (text) {		case "刷新":			document.location.reload();			break;		case "退出登录":			if(confirm("是否要退出登录？")){							}			break;		default:			break;		}				$(".content-menu").hide();	});});//排列图标部分function arrange(){	var ul=$(".icons");	var working=$(".working");	//位置坐标	var position={x:0,y:0,bottom:110,width:50,height:50,parent:{height:0,width:0},padding:{top:10,left:10,right:0,bottom:10}};		position.parent.height=working.height()-40;	position.parent.width=working.width();		ul.find("li").each(function(index) {				$(this).css("top",position.y+"px");		$(this).css("left",position.x+"px");				position.height=$(this).height();		position.width=$(this).width();				position.y=position.y+position.height+position.padding.bottom+position.padding.bottom;				if(position.y>=position.parent.height-position.bottom){			position.y=0;			position.x=position.x+position.width+position.padding.left;		}	});}

html代码：

 

 

      	    
        
        
        
    	
    			        	    	
    
    					
     
								
      						
     
			    	
    
						
    
			
     
				
      
					
       
				
      
			
     
						
     
								
      
					
       
        
        
        
        
       
				
      
								
      			
     
					
    
				
    
     窗体
    
			
    
		
     
			
      
刷新
			
      
设置
			
      
			
      
帮助
			
      
			
      
关于
			
      
			
      
系统设置
			
      
退出登录
		
     
	
    
				    

CSS代码：

 

 

@CHARSET "UTF-8";body, html {    overflow: hidden;    height: 100%;    width: 100%;    margin: 0px;    padding: 0px;}.working {    height: 100%;    width: 100%;    background-image: url("../images/untitled.png");    background-repeat: no-repeat;    background-color: rgb(235, 236, 238);    padding: 20px;}.working ul {    height: 100%;    position: relative;}.working ul li {    position: absolute;    display: block;    width: 90px;    height: 90px;    text-align: center;    margin: 0px 10px 10px 10px;    float: left;    border: inherit 1px inherit;    overflow: hidden;    cursor: pointer;}.taskbar {    position: absolute;    height: 35px;    line-height: 35px;    width: 100%;    bottom: 0px;    background-color: #CCC;    z-index: 999;    filter: alpha(opacity = 80);    opacity: 0.8;    padding: 0px 10px;}.menu {    display: block;    width: 50px;    height: 30px;    float: left;}.menu-list {    position: absolute;    left: 0px;    bottom: 35px;    width: 350px;    height: 500px;    border: #CCC 1px solid;    background-color: white;    filter: alpha(opacity = 90);    opacity: 0.9;    border-radius: 5px;    display: none;}ul {    margin: 0px;    padding: 0px;}.menu-icon {    cursor: pointer;}.menu-icon ul li {    display: block;    width: 15px;    height: 15px;    float: left;    margin: 1px;    background-color: white;    border-radius: 3px;}.menu-icon:hover li {    background-color: red;}.icons li img {    max-height: 70px;    max-width: 90px;}.text {    position: static;    height: 20px;    line-height: 20px;    width: 100%;    margin: 0px;    font-size: 12px;    font-family: 微软雅黑;    color: white;}.icons-move {    border: rgb(161, 194, 219) 1px solid;    background-color: rgb(194, 208, 226);    filter: alpha(opacity = 60);    opacity: 0.6;    border-radius: 3px;}.icons-focus {    border: rgb(161, 194, 219) 1px solid;    background-color: rgb(194, 208, 226);    filter: alpha(opacity = 100);    opacity: 1;    border-radius: 3px;}.window {    height: 200px;    width: 200px;    border: #CCC 1px solid;    background-color: white;    border-radius: 5px;    position: absolute;    top: 0px;    z-index: 10;}/* * 右键菜单 */.content-menu {    position: absolute;    width: 150px;    height: auto;    background-color: rgb(255, 255, 255);    border: #CCC 1px solid;    display: none;	border-radius:5px;	z-index:999;}.content-menu ul {    margin: 0px;    padding: 0px;}.content-menu ul li {    list-style: none;    line-height: 30px;    height: 30px;    margin: 3px 0px;	padding:0px;    font-size: 13px;}.content-menu ul li a{	text-decoration:none;	display:block;	font-family: 微软雅黑;	padding:0px 5px;	width:140px;	height:100%;	color: #333;	outline:none;	}.content-menu ul li a:hover {    background-color: #DDD;}.content-menu ul hr {    margin: 1px 0px;    height: 0px;    border: 0px;    border-bottom: #CCC 1px solid;}