Windowsデスクトップのアイコン配置アルゴリズムを模倣したjsの具体的な実装（写真付き）_javascriptスキル
WBOY
リリース： 2016-05-16 17:32:07
オリジナル
1466 人が閲覧しました
注: Jquery の導入が必要です
すべての機能が必要な場合は、jquery-ui と jquery-ui.css を導入してください
スクリーンショット: 
js コード:
コードをコピー コードは次のとおりです:
$(function() {
//Menu list
var menu_list =$(".menu-list");
//ワークスペース
var working=$(".working");
working.click( function() {
menu_list.hide();
$(".content-menu").hide("slow");
// メニューをクリックしますicon
$ (".menu").bind("click",function() {
menu_list.show();
});
$( window).resize(function() {
arrange();
});
//右クリック メニューをシールドします
$(document).contextmenu( function() {
return false;
});
// ワークスペースをクリックしたときに右クリック メニューを表示します
$(".working").contextmenu(イベント) {
var x=event.clientX;
var y=event.clientY;
//座標を判断します
var width=document.body.clientWidth;
x=(x menu.width())>=width?width-menu; .width():x;
y=(y menu.height())>=height-40?height-menu.height():y;
//alert("視覚的な高さ) : " 高さ "、マウスの高さ: " 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 "ログアウト":
if(confirm( "ログアウトしますか? ")){
}
break;
デフォルト:
break;
}
$(".content-menu").hide();
});
});
//アイコン部分を配置します
function array(){
var ul=$(".icons"); ( ".working");
//位置座標
var Position={x:0,y:0,bottom:110,width:50,height:50,parent:{height:0,width: 0 },padding:{上:10,左:10,右:0,下: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();位置 .width=$(this).width();
position.y=position.y 位置.高さ 位置.パディング.ボトム 位置.パディング.ボトム;
if(位置 . y> ;=position.parent.height-position.bottom){
position.y=0;
position.x=position.xposition.widthposition.padding.left; ) ;
}
html コード:
コードをコピー
コードは次のとおりです。
<頭>
<スクリプト言語="JavaScript" src="js/window.js">
- ';
html = '
';
html = '图标' i '';
html = ' ';
<スクリプト>
for (var i = 1; i var html = "";
html = '
document.write(html);
}