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.yy. >=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 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("雙擊");
});

// 按鍵事件
$(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");警報（“確定進入” )
}

}）;

//圖示拖曳
$(".icons li").draggable();

//註冊resize事件
$(".window").draggable({containment: 'parent'});
$(".window").ressized({containment: 'parent'});

腳本>
身體>



CSS程式碼：

複製程式碼複製程式碼

複製程式碼複製程式碼複製程式碼程式碼如下：

@CHARSET "UTF-8";
正文，html {
溢出：隱藏；
高度：100%;
寬度：100%;
邊距： 0px;
內邊距：0px;
}
.工作{
高度：100%;
寬度：100%;
背景圖片: url("../images /untitled.png");
背景重複：不重複；
背景顏色：rgb(235, 236, 238);
內邊距：20px;
}
.working ul {
高度：100%；
位置：相對；
}
.working ul li {
位置：絕對;
顯示：塊；
寬度：90px；
高度：90px;
文字對齊：居中；
邊距：0px 10px 10px 10px;
浮動：左；
邊框：繼承1px繼承；
浮動：左；
邊框：繼承1px繼承；
溢出：隱藏； > 遊標：指針；
}
.taskbar {
位置：絕對；
高度：35px;
行高：35px;
寬度：100%;
底部： 0px;
背景顏色：#CCC；
z 索引：999；
濾鏡：alpha（不透明度= 80）；
不透明度：0.8；
內邊距：0px 10pxxx ;
}
.menu {
顯示：塊；
寬度：50px;
高度：30px;
浮動：左；
}
.menu-list {
位置：絕對；
左：0px;
底部：35px;
寬度：350px;
高度：500px;
邊框：#CCC 1px 實心> 高度：500px;
邊框：#CCC 1px 實心；顏色：白色；
濾鏡：alpha（不透明度= 90）；
不透明度：0.9；
邊框半徑：5px;
顯示：無；
}
ul {
邊距：0px;
內邊距：0px;
}
.menu-icon {
遊標：指針；
}
.menu-icon ul li {
顯示：塊；
寬度：15px;
高度：15px;
浮動：左；
邊距：1px;
背景顏色：白色；
邊框半徑： 3px;
}
.menu-icon:hover li {
背景顏色：紅色；
}
.icons li img {
最大高度：70px；
最大寬度：90px;
}
.text {
位置：靜態；
高度：20px;
行高：20px;
寬度：100%；
邊距：0px ;
字體大小：12px;
字體系列：微軟雅黑；
顏色：白色；
}
.icons-move {
邊框：rgb(161, 194, 219 ) 1px 實心；
背景顏色：rgb(194, 208, 226);
過濾器：alpha（不透明度= 60）；
不透明度：0.6；
邊框半徑：3px； 🎜>}
.icons-focus {
邊框：rgb(161, 194, 219) 1px 實心；
背景顏色：rgb(194, 208, 226);
背景顏色：rgb(194, 208, 226);
濾光片不透明度= 100）；
不透明度：1；
邊框半徑：3px;
}
.window {
高度：200px;
寬度：200px; 高度：200px;
寬度：200px; 高度：200px;
寬度：200px； ：#CCC 1px 實心；
背景顏色：白色；
邊框半徑：5px；
位置：絕對；
頂部：0px;
z 索引：10；
}
/*
* 右鍵選單
*/
.content-menu {
位置：絕對；
寬度：150px;
高度：自動；
背景顏色：rgb (255, 255, 255);
邊框：#CCC 1px 實心；
顯示：無；
邊框半徑：5px;
z-index:999;
}
}
. content-menu ul {
邊距：0px;
內邊距：0px;
}
.content-menu ul li {
列表樣式：無；
行高： 30px;
高度：30px;
邊距：3px 0px;
內邊距：0px;
字體大小：13px;
}
.content-menuul li a{menuul li a{menuul li a{menuul li a{menuul li a{menu
text-decoration:none;
顯示：塊；
字體系列：微軟雅黑；
內邊距：0px 5px;
寬度：140px;
高度：100% ;
顏色：#333;
大綱：無;

}
.content-menu ul li a:hover {
背景顏色：#DDD;
}
.content-menu ul hr {
邊距：1px 0px;
高度：0px;
邊框：0px;

邊框底部：#CCC 1px 實心； }