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; 
}
Javascript 相关文章推荐
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
小程序input数据双向绑定实现方法
Oct 17 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
You might like
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
JavaScript delete 属性的使用
2009/10/08 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
javascript天然的迭代器
2010/10/29 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
python简单实现旋转图片的方法
2015/05/30 Python
Python中方法链的使用方法
2016/02/23 Python
简单了解Django模板的使用
2017/12/20 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
python写入已存在的excel数据实例
2018/05/03 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
Python远程方法调用实现过程解析
2020/07/28 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
几个人围成一圈的问题
2013/09/26 面试题
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
成功的酒店创业计划书
2013/12/27 职场文书
节能减排倡议书
2014/04/15 职场文书
初二学习计划书范文
2014/04/27 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
怎样写工作总结啊!
2019/06/18 职场文书