注:需要引入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.y>=position.parent.height-position.bottom){ position.y=0; position.x=position.x+position.width+position.padding.left; } }); }
html代码:
index.html <script> <BR>for (var i = 1; i <= 4; i++) { <BR>var html = ""; <BR>html += '<li>'; <BR>html += '<img src="images/'+i+'.gif" alt="js模仿windows桌面图标排列算法具体实现(附图)_javascript技巧" >'; <BR>html += '<div class="text">鍥炬爣'+i+'</script>
';
html += '';
document.write(html);
}
绐椾綋