编程 Javascript

js模仿windows桌面图标排列算法具体实现(附图)

Posted in Javascript onJune 16, 2013

注：需要引入Jquery
如果需要全部功能，请引入jquery-ui和jquery-ui.css
截图：
js模仿windows桌面图标排列算法具体实现(附图)
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代码：

<!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN"> 
<html> 
<head> 
<title>index.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=GBK"> 
<link rel="stylesheet" type="text/css" href="css/window.css"> 
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css"> 
<script language="JavaScript" src="js/jquery-1.10.0.js"></script> 
<script language="JavaScript" src="js/jquery-ui.js"></script> 
<script language="JavaScript" src="js/window.js"></script> 
</head> 
<body> 
<div class="working"> 
<ul class="icons"> 
<script> 
for (var i = 1; i <= 4; i++) { 
var html = ""; 
html += '<li>'; 
html += '<img src="images/'+i+'.gif">'; 
html += '<div class="text">图标'+i+'</div>'; 
html += '</li>'; 
document.write(html); 
} 
</script> 
</ul> 
</div> 

<div class="taskbar"> 
<div class="menu-list"> 
<ul> 
<li></li> 
</ul> 
</div> 
<div class="menu"> 
<div class="menu-icon"> 
<ul><li></li><li></li><li></li><li></li></ul> 
</div> 
<a href="javascript:;"></a> 
</div> 
</div> 
<div class="window" title="窗体">窗体</div> 
<div class="content-menu"> 
<ul> 
<li><a href="javascript:;">刷新</a></li> 
<li><a href="javascript:;">设置</a></li> 
<hr/> 
<li><a href="javascript:;">帮助</a></li> 
<hr/> 
<li><a href="javascript:;">关于</a></li> 
<hr/> 
<li><a href="javascript:;">系统设置</a></li> 
<li><a href="javascript:;">退出登录</a></li> 
</ul> 
</div> 

<script> 
$(".icons li").mousemove(function(){ 
$(this).addClass("icons-move"); 
}); 
$(".icons li").mouseout(function(){ 
$(this).removeClass("icons-move"); 
}); 
$(".icons li").mousedown(function(){ 
$(".icons li").removeClass("icons-focus"); 
$(this).addClass("icons-focus"); 
//改变当前的索引 
$(".icons li").css("z-index",0); 
$(this).css("z-index",1); 
}); 
$(".icons li").dblclick(function(){ 
alert("double click"); 
}); 
//按键事件 
$(document).keyup(function(event){ 
var UP=38; 
var DOWM=40; 
var ENTER=13; 
var elem=$(".icons-focus"); 
if(elem.html()=="undefined")return; 
if (event.keyCode == UP) { 
$(".icons li").removeClass("icons-focus"); 
elem.prev().addClass("icons-focus"); 
} 
if(event.keyCode==DOWM){ 
$(".icons li").removeClass("icons-focus"); 
elem.next().addClass("icons-focus"); 
} 
//回车打开选中的图标 
if(event.keyCode==ENTER){ 
var open=$(".icons-focus"); 
alert("ok enevt is enter"); 
} 
}); 
//图标拖拽 
$(".icons li").draggable(); 
//注册resize事件 
$(".window").draggable({containment: 'parent'}); 
$(".window").resizable({containment: 'parent'}); 
</script> 
</body> 
</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; 
}

js模仿windows桌面图标排列算法具体实现(附图)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript性能陷阱小结(附实例说明)

Dec 28 Javascript

js常用排序实现代码

Dec 28 Javascript

基于jquery的分页控件(C#)

Jan 06 Javascript

JavaScript页面模板库handlebars的简单用法

Mar 02 Javascript

jquery制作多功能轮播图插件

Apr 02 Javascript

基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码

May 30 Javascript

jquery动态添加文本并获取值的方法

Oct 12 Javascript

Canvas 制作动态进度加载水球详解及实例代码

Dec 09 Javascript

JS数组去重常用方法实例小结【4种方法】

May 28 Javascript

详解JS实现系统登录页的登录和验证

Apr 29 Javascript

JavaScript创建、读取和删除cookie

Sep 03 Javascript

解决vue项目运行npm run serve报错的问题

Oct 26 Javascript

js模仿jquery的写法示例代码

Jun 16 #Javascript

$.getJSON在IE下失效的原因分析及解决方法

Jun 16 #Javascript

jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例

Jun 14 #Javascript

JS保存、读取、换行、转Json报错处理方法

Jun 14 #Javascript

用js实现控件的隐藏及style.visibility的使用

Jun 14 #Javascript

JavaScript实现表格排序方法

Jun 14 #Javascript

json数据处理技巧(字段带空格、增加字段、排序等等)

Jun 14 #Javascript