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插件冲突的问题
Jan 23 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
canvas的神奇用法
Feb 03 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
vue.js实现简单购物车功能
May 30 Javascript
Element Backtop回到顶部的具体使用
Jul 27 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 CURL模拟GET及POST函数代码
2010/04/25 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
Python实现最大子序和的方法示例
2019/07/05 Python
Django配置文件代码说明
2019/12/04 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
代理商会议邀请函
2014/01/27 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
2014年学前班工作总结
2014/12/08 职场文书
投标承诺函范文
2015/01/21 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python