首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
Node.js数据库操作之查询MySQL数据库（二）
Mar 04 Javascript
js实现动态显示时间效果
Mar 06 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 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
游标(1) ECharts(3) GTID(1) timestamp(1) 临时表(1) props(1) ref(1) ip连接(1) 表变量(1) mixin(1)
You might like
php限制文件下载速度的代码
2015/10/20 PHP
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
JS实现的缓冲运动效果示例
2018/04/30 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
Diango + uwsgi + nginx项目部署的全过程（可外网访问）
2018/04/22 Python
python生成器与迭代器详解
2019/01/01 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
浅析python中的del用法
2020/09/02 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
Saucony澳大利亚官网：美国跑鞋品牌，运动鞋中的劳斯莱斯
2018/05/05 全球购物
eBay瑞士购物网站：eBay.ch
2018/12/24 全球购物
影视动画专业个人的自我评价
2013/12/31 职场文书
自行车广告词大全
2014/03/21 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
材料物理专业求职信
2014/09/01 职场文书
争先创优个人总结
2015/03/04 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
开学第一周日记（三篇范文）
2019/08/23 职场文书
python not运算符的实例用法
2021/06/30 Python
基于Python实现nc批量转tif格式
2022/08/14 Python