首页 > Js开发 > js 模仿windows 桌面图标排列算法

js 模仿windows 桌面图标排列算法

注:需要引入Jquery

如果需要全部功能,请引入jquery-ui和jquery-ui.css

截图:

js代码:

 

[javascript] view plaincopy

  1. $(function() {
  2.     //菜单列表
  3.     var menu_list=$(".menu-list");
  4.     //工作区
  5.     var working=$(".working");
  6.     working.click(function() {
  7.         menu_list.hide();
  8.         $(".content-menu").hide("slow");
  9.     });
  10.     //菜单图标单击
  11.     $(".menu").bind("click",function() {
  12.         menu_list.show();
  13.     });
  14.     arrange();
  15.     $(window).resize(function() {
  16.         arrange();
  17.     });
  18.     //屏蔽右键菜单
  19.     $(document).contextmenu(function() {
  20.         return false;
  21.     });
  22.     //点击工作区的时候 显示右键菜单
  23.     $(".working").contextmenu(function(event) {
  24.         var x=event.clientX;
  25.         var y=event.clientY;
  26.         var menu=$(".content-menu");
  27.         //判断坐标
  28.         var width=document.body.clientWidth;
  29.         var height=document.body.clientHeight;
  30.         x=(x+menu.width())>=width?width-menu.width():x;
  31.         y=(y+menu.height())>=height-40?height-menu.height():y;
  32.         //alert("可视高度:"+height+",鼠标高度:"+y);
  33.         menu.css("top",y);
  34.         menu.css("left",x);
  35.         menu.show();
  36.     });
  37.     //content-menu
  38.     $(".content-menu ul li").click(function() {
  39.         var text=$(this).text();
  40.         switch (text) {
  41.         case "刷新":
  42.             document.location.reload();
  43.             break;
  44.         case "退出登录":
  45.             if(confirm("是否要退出登录?")){
  46.             }
  47.             break;
  48.         default:
  49.             break;
  50.         }
  51.         $(".content-menu").hide();
  52.     });
  53. });
  54. //排列图标部分
  55. function arrange(){
  56.     var ul=$(".icons");
  57.     var working=$(".working");
  58.     //位置坐标
  59.     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}};
  60.     position.parent.height=working.height()-40;
  61.     position.parent.width=working.width();
  62.     ul.find("li").each(function(index) {
  63.         $(this).css("top",position.y+"px");
  64.         $(this).css("left",position.x+"px");
  65.         position.height=$(this).height();
  66.         position.width=$(this).width();
  67.         position.y=position.y+position.height+position.padding.bottom+position.padding.bottom;
  68.         if(position.y>=position.parent.height-position.bottom){
  69.             position.y=0;
  70.             position.x=position.x+position.width+position.padding.left;
  71.         }
  72.     });
  73. }

html代码:

 

 

[html] view plaincopy

  1. <!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN">
  2. <html>
  3.   <head>
  4.     <title>index.html</title>
  5.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  6.     <meta http-equiv="description" content="this is my page">
  7.     <meta http-equiv="content-type" content="text/html; charset=GBK">
  8.     <link rel="stylesheet" type="text/css" href="css/window.css">
  9.     <link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
  10.     <script language="JavaScript" src="js/jquery-1.10.0.js"></script>
  11.     <script language="JavaScript" src="js/jquery-ui.js"></script>
  12.     <script language="JavaScript" src="js/window.js"></script>
  13.   </head>
  14.   <body>
  15.         <div class="working">
  16.             <ul class="icons">
  17.                 <script>
  18.                     for (var i = 1; i <= 4; i++) {
  19.                         var html = "";
  20.                         html += '<li>';
  21.                         html += '<img src="images/'+i+'.gif">';
  22.                         html += '<div class="text">图标'+i+'</div>';
  23.                         html += '</li>';
  24.                         document.write(html);
  25.                     }
  26.                 </script>
  27.             </ul>
  28.         </div>
  29.         <div class="taskbar">
  30.             <div class="menu-list">
  31.                 <ul>
  32.                     <li></li>
  33.                 </ul>
  34.             </div>
  35.             <div class="menu">
  36.                 <div class="menu-icon">
  37.                     <ul><li></li><li></li><li></li><li></li></ul>
  38.                 </div>
  39.                 <a href="javascript:;"></a>
  40.             </div>
  41.         </div>
  42.         <div class="window" title="窗体">窗体</div>
  43.     <div class="content-menu">
  44.         <ul>
  45.             <li><a href="javascript:;">刷新</a></li>
  46.             <li><a href="javascript:;">设置</a></li>
  47.             <hr/>
  48.             <li><a href="javascript:;">帮助</a></li>
  49.             <hr/>
  50.             <li><a href="javascript:;">关于</a></li>
  51.             <hr/>
  52.             <li><a href="javascript:;">系统设置</a></li>
  53.             <li><a href="javascript:;">退出登录</a></li>
  54.         </ul>
  55.     </div>
  56.     <script>
  57.         $(".icons li").mousemove(function(){
  58.             $(this).addClass("icons-move");
  59.         });
  60.         $(".icons li").mouseout(function(){
  61.             $(this).removeClass("icons-move");
  62.         });
  63.         $(".icons li").mousedown(function(){
  64.             $(".icons li").removeClass("icons-focus");
  65.             $(this).addClass("icons-focus");
  66.             //改变当前的索引
  67.             $(".icons li").css("z-index",0);
  68.             $(this).css("z-index",1);
  69.         });
  70.         $(".icons li").dblclick(function(){
  71.             alert("double click");
  72.         });
  73.         //按键事件
  74.         $(document).keyup(function(event){
  75.             var UP=38;
  76.             var DOWM=40;
  77.             var ENTER=13;
  78.                 var elem=$(".icons-focus");
  79.                 if(elem.html()=="undefined")return;
  80.                 if (event.keyCode == UP) {
  81.                     $(".icons li").removeClass("icons-focus");
  82.                     elem.prev().addClass("icons-focus");
  83.                 }
  84.                 if(event.keyCode==DOWM){
  85.                     $(".icons li").removeClass("icons-focus");
  86.                     elem.next().addClass("icons-focus");
  87.                 }
  88.             //回车打开选中的图标
  89.             if(event.keyCode==ENTER){
  90.                 var open=$(".icons-focus");
  91.                 alert("ok enevt is enter");
  92.             }
  93.         });
  94.         //图标拖拽
  95.         $(".icons li").draggable();
  96.         //注册resize事件
  97.          $(".window").draggable({containment: 'parent'});
  98.          $(".window").resizable({containment: 'parent'});
  99.     </script>
  100.   </body>
  101. </html>

CSS代码:

 

 

[css] view plaincopy

  1. @CHARSET "UTF-8";
  2. body, html {
  3.     overflow: hidden;
  4.     height: 100%;
  5.     width: 100%;
  6.     margin: 0px;
  7.     padding: 0px;
  8. }
  9. .working {
  10.     height: 100%;
  11.     width: 100%;
  12.     background-image: url("../images/untitled.png");
  13.     background-repeat: no-repeat;
  14.     background-color: rgb(235, 236, 238);
  15.     padding: 20px;
  16. }
  17. .working ul {
  18.     height: 100%;
  19.     position: relative;
  20. }
  21. .working ul li {
  22.     position: absolute;
  23.     display: block;
  24.     width: 90px;
  25.     height: 90px;
  26.     text-align: center;
  27.     margin: 0px 10px 10px 10px;
  28.     float: left;
  29.     border: inherit 1px inherit;
  30.     overflow: hidden;
  31.     cursor: pointer;
  32. }
  33. .taskbar {
  34.     position: absolute;
  35.     height: 35px;
  36.     line-height: 35px;
  37.     width: 100%;
  38.     bottom: 0px;
  39.     background-color: #CCC;
  40.     z-index: 999;
  41.     filter: alpha(opacity = 80);
  42.     opacity: 0.8;
  43.     padding: 0px 10px;
  44. }
  45. .menu {
  46.     display: block;
  47.     width: 50px;
  48.     height: 30px;
  49.     float: left;
  50. }
  51. .menu-list {
  52.     position: absolute;
  53.     left: 0px;
  54.     bottom: 35px;
  55.     width: 350px;
  56.     height: 500px;
  57.     border: #CCC 1px solid;
  58.     background-color: white;
  59.     filter: alpha(opacity = 90);
  60.     opacity: 0.9;
  61.     border-radius: 5px;
  62.     display: none;
  63. }
  64. ul {
  65.     margin: 0px;
  66.     padding: 0px;
  67. }
  68. .menu-icon {
  69.     cursor: pointer;
  70. }
  71. .menu-icon ul li {
  72.     display: block;
  73.     width: 15px;
  74.     height: 15px;
  75.     float: left;
  76.     margin: 1px;
  77.     background-color: white;
  78.     border-radius: 3px;
  79. }
  80. .menu-icon:hover li {
  81.     background-color: red;
  82. }
  83. .icons li img {
  84.     max-height: 70px;
  85.     max-width: 90px;
  86. }
  87. .text {
  88.     position: static;
  89.     height: 20px;
  90.     line-height: 20px;
  91.     width: 100%;
  92.     margin: 0px;
  93.     font-size: 12px;
  94.     font-family: 微软雅黑;
  95.     color: white;
  96. }
  97. .icons-move {
  98.     border: rgb(161, 194, 219) 1px solid;
  99.     background-color: rgb(194, 208, 226);
  100.     filter: alpha(opacity = 60);
  101.     opacity: 0.6;
  102.     border-radius: 3px;
  103. }
  104. .icons-focus {
  105.     border: rgb(161, 194, 219) 1px solid;
  106.     background-color: rgb(194, 208, 226);
  107.     filter: alpha(opacity = 100);
  108.     opacity: 1;
  109.     border-radius: 3px;
  110. }
  111. .window {
  112.     height: 200px;
  113.     width: 200px;
  114.     border: #CCC 1px solid;
  115.     background-color: white;
  116.     border-radius: 5px;
  117.     position: absolute;
  118.     top: 0px;
  119.     z-index: 10;
  120. }
  121. /*
  122.  * 右键菜单
  123.  */
  124. .content-menu {
  125.     position: absolute;
  126.     width: 150px;
  127.     height: auto;
  128.     background-color: rgb(255, 255, 255);
  129.     border: #CCC 1px solid;
  130.     display: none;
  131.     border-radius:5px;
  132.     z-index:999;
  133. }
  134. .content-menu ul {
  135.     margin: 0px;
  136.     padding: 0px;
  137. }
  138. .content-menu ul li {
  139.     list-style: none;
  140.     line-height: 30px;
  141.     height: 30px;
  142.     margin: 3px 0px;
  143.     padding:0px;
  144.     font-size: 13px;
  145. }
  146. .content-menu ul li a{
  147.     text-decoration:none;
  148.     display:block;
  149.     font-family: 微软雅黑;
  150.     padding:0px 5px;
  151.     width:140px;
  152.     height:100%;
  153.     color: #333;
  154.     outline:none;
  155. }
  156. .content-menu ul li a:hover {
  157.     background-color: #DDD;
  158. }
  159. .content-menu ul hr {
  160.     margin: 1px 0px;
  161.     height: 0px;
  162.     border: 0px;
  163.     border-bottom: #CCC 1px solid;
  164. }

本文固定链接: http://www.devba.com/index.php/archives/1183.html | 开发吧

报歉!评论已关闭.