Specific implementation of js imitating windows desktop icon arrangement algorithm (with pictures)

Specific implementation of js imitating windows desktop icon arrangement algorithm (with pictures)_javascript skills

WBOY

Release： 2016-05-16 17:32:07

Original

1494 people have browsed it

Note: Jquery needs to be introduced
If you need all functions, please introduce jquery-ui and jquery-ui.css
Screenshot:
Specific implementation of js imitating windows desktop icon arrangement algorithm (with pictures)_javascript skills
js code:

Copy code The code is as follows:

 
$(function() { 

//Menu list
var menu_list =$(".menu-list"); 

//Workspace
var working=$(".working"); 

working.click(function() { 
menu_list.hide(); 
$(".content-menu").hide("slow"); 
}); 

//Click the menu icon
$ (".menu").bind("click",function() { 
menu_list.show(); 

}); 
arrange(); 

$( window).resize(function() { 
arrange(); 
}); 

//Shield right-click menu
$(document).contextmenu(function() { 
 return false; 
}); 

//Display the right-click menu when clicking on the workspace
$(".working").contextmenu(function(event) { 

var x=event.clientX; 
var y=event.clientY; 
var menu=$(".content-menu"); 

//Judge coordinates
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("Visual height: " height ", mouse 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 "Refresh": 
document.location.reload(); 
break; 
case "Log out": 
if(confirm( "Do you want to log out? ")){ 

} 
break; 
default: 
break; 
} 

$(".content-menu").hide(); 
}); 
}); 
//Arrange the icon part
function arrange(){ 
var ul=$(".icons"); 
var working=$( ".working"); 
//Position coordinates
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 code:

Copy code The code is as follows:

index.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; 
} 