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

Note: Jquery needs to be introduced
If you need all functions, please introduce jquery-ui and jquery-ui.css
Screenshot:

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:

<script> <BR>for (var i = 1; i <= 4; i ) { <BR>var html = ""; <BR>html = '<li>'; <BR>html = '<img src="images/' i '.gif" alt="Specific implementation of js imitating windows desktop icon arrangement algorithm (with pictures)_javascript skills" >'; <BR>html = '<div class="text">鍥炬爣' i '</script>

';
html = '';
document.write(html);
}

• 
  

绐椾綋

• 鍒锋柊


• 璁剧疆



---



• 甯