首页
所有分类
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 相关文章推荐
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
javascript实现在线客服效果
Jul 15 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
js下载文件并修改文件名
May 08 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 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) matplotlib(7) 排名(1) ipyvizzu(1) 条形图(1) 阿里云(6) bufio(1) 数据同步(1) redis shake(1) 分析统计(1)
You might like
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
在视频前插入广告
2006/11/20 Javascript
40款非常有用的 jQuery 插件推荐（系列一）
2011/12/21 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
朴素贝叶斯算法的python实现方法
2014/11/18 Python
详解python基础之while循环及if判断
2017/08/24 Python
Python语言的变量认识及操作方法
2018/02/11 Python
pandas对指定列进行填充的方法
2018/04/11 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
python安装本地whl的实例步骤
2019/10/12 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
python 识别登录验证码图片功能的实现代码（完整代码）
2020/07/03 Python
python使用建议与技巧分享（一）
2020/08/17 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
打架检讨书2000字
2014/02/22 职场文书
调研汇报材料范文
2014/08/17 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
用python自动生成日历
2021/04/24 Python
Log4j.properties配置及其使用
2021/08/02 Java/Android
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers