注：需要引入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;

}

總結

以上是生活随笔為你收集整理的html5+开发window桌面图标,js模仿windows桌面图标排列算法具体实现(附图)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。