html5+开发window桌面图标,js模仿windows桌面图标排列算法具体实现(附图)

注：需要引入J鼠标ery

如果需要全部功能，请引入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代码：

复制代码 代码如下:

index.html

for (var i = 1; i <= 4; i++) {

var html = "";

html +=

;

html += ;

html +=

图标+i+

;

html +=

;

document.write(html);

}

窗体

• 刷新
• 设置

  ---

• 帮助

  ---

• 关于

  ---

• 系统设置
• 退出登录

$(".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});

CSS代码：

复制代码 代码如下:

@CHARSET "UTF-8";

body, html {

overflow: hidden;

height: 100%;

width: 100%;

margin: 0px;

padding: 0px;

}

.working {

height: 100%;

width: 100%;

background-image: url("http://www.zhujiangroad.com/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;

}