Windows 바탕 화면 아이콘 배열 알고리즘을 모방한 js의 구체적인 구현(그림 포함)_javascript 기술
- WBOY원래의
- 2016-05-16 17:32:071452검색
참고: Jquery를 도입해야 합니다
모든 기능이 필요한 경우 jquery-ui 및 jquery-ui.css를 도입하세요
스크린샷: 
js 코드:
코드 복사 코드는 다음과 같습니다.
$(function() {
//Menu list
var menu_list =$(".menu-list");
//작업 공간
varworking=$(".working")
working.click( function() {
menu_list.hide();
$(".content-menu").hide("slow")
});
//메뉴 클릭 icon
$ (".menu").bind("click",function() {
menu_list.show();
})
arrange();
$( window).resize(function() {
arrange();
})
//오른쪽 클릭 메뉴 보호
$(document).contextmenu( function() {
return false;
});
//작업공간 클릭 시 마우스 오른쪽 버튼 클릭 메뉴 표시
$(".working").contextmenu(function( 이벤트) {
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("시각적 높이 : " 높이 ", 마우스 높이: " 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 "로그아웃" ":
if(confirm( "로그아웃하시겠습니까? ")){
}
break;
기본값:
break;
}
$(".content-menu").hide();
});
});
//아이콘 부분 정렬
function alignment(){
var ul=$(".icons")
varworking=$ ( ".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 코드:
코드 복사
';