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

注:需要引入Jquery
如果需要全部功能,请引入jquery-ui和jquery-ui.css
截图:
 
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;
}

时间: 2024-10-31 00:43:12

js模仿windows桌面图标排列算法具体实现(附图)_javascript技巧的相关文章

js模仿php中strtotime()与date()函数实现方法_javascript技巧

本文实例讲述了js模仿php中strtotime()与date()函数实现方法.分享给大家供大家参考.具体如下: 在js中没有像php中strtotime()与date()函数,可直接转换时间戳,下面我们来自定一个函数来实现js中具体有时间戳转换的功能. function datetime_to_unix(datetime){ var tmp_datetime = datetime.replace(/:/g,'-'); tmp_datetime = tmp_datetime.replace(/

JS仿Windows开机启动Loading进度条的方法_javascript技巧

本文实例讲述了JS仿Windows开机启动Loading进度条的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>JS仿Windows开机启动的Loading进度条</title> </head> <body style="margin:0;background-color:#5279CE;" scroll=no> <table id=lw style="disp

js模仿html5 placeholder适应于不支持的浏览器_javascript技巧

html5原生支持placeholder,对于不支持的浏览器(ie),可用js模拟实现. js代码 复制代码 代码如下: (function(){ //判断是否支持placeholder function isPlaceholer(){ var input = document.createElement('input'); return "placeholder" in input; } //不支持的代码 if(!isPlaceholer()){ //创建一个类 function P

js css 实现遮罩层覆盖其他页面元素附图_javascript技巧

<div style=" position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; background-color: Black; z-index: 9999; filter: alpha(opacity=70); Opacity:0.7;"></div> z-index 必须大于遮罩元素 demo <!doctype html> <html> <head&g

还能这么玩?组合键调教Windows桌面图标

Windows的桌面图标(就是快捷方式啦)是一种让人又爱又恨的存在.爱的是需要它们的时候启动真方便,恨的是图标会影响桌面整洁,有强迫症的童鞋会看着很不爽.相信很多小伙伴都经历过一个个手动调整位置和样式的苦日子吧? 小编偷偷告诉大家一个绝招,在Windows 8/10系统里,微软偷摸加入了方便管理桌面图标的快捷键组合,利用它们就能让咱们轻松调教这些家伙啦.对了,感兴趣的童鞋还可点击这里复习一下Win键的其他妙用. 啥?你觉得没用?好吧,先来看看如果不用快捷键,咱们能做到什么.桌面点击鼠标,看到没?

基于JS模仿windows文件按名称排序效果_javascript技巧

作个记录,主要是对数字的处理,如果数字的前面字符是相同的,则数字以值比较,而不是单个字符之间的比较. function SortLikeWin(v1, v2) { var a = v1.name; var b = v2.name; var reg = /[0-9]+/g; var lista = a.match(reg); var listb = b.match(reg); if (!lista || !listb) { return a.localeCompare(b); } for (var

Win8.1/Win10系统使用组合键玩转桌面图标排列的操作方法

  Win8.1/Win10系统使用组合键玩转桌面图标排列的操作方法.今天小编和大家分享Win8.1/Win10使用组合键玩转桌面图标排列的操作方法,对于Win8.1/Win10系统桌面图标的管理可能每个人的需求都是不一样的,有些用户喜欢把感觉用得到的东西都放在桌面上,一些用户习惯简洁大方.为满足大众要求,在Win8.1/Win10中,微软新增的组合键让桌面图标排列有了更多选择,下面我们就看一下操作方法. 一.这种效果是不是有点透明的味道 操作方法很简单,只需要用键盘和鼠标即可完成,关键是要记住

Windows桌面图标故障解决方法

症状一:"网络连接"窗口中我的"本地连接"和"ADSL"图标不见了 这可能是你的Network Connections服务被禁用了原因造成的,查看方法如下:在"运行"窗口中输入"services.msc",然后在打开的"服务"窗口右侧服务列表中找到名称为"Network Connections"的服务,看看其状态是否为"已启动".如果不是,那么就需

去除Windows桌面图标上的阴影

经常看到有的人桌面图标下总有一块区域与桌面背景不同,看起来很不美观,应该怎样去除呢? 方法1:在桌面空白处点右键,"属性"→"桌面"→"自定义桌面"→"web"选项卡,将"网页"下面方框里的网址全部删除,并保持在"锁定桌面项目"前不要打勾,确定即可. 方法2:右键点击桌面上的空白区,选择"排列图标",去掉"在桌面上锁定web项目"复选框的勾. 方法