注意:需要引入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.yy. >=position.parent.height-position.bottom){ position.y=0; position.x=position.x position.width position.padding.left; } }) ; }
html程式碼:
複製程式碼 程式碼
index.html
頭>
for (var i = 1; i var html = ""; html = ''; html = ' '; html = '圖示' i '
'; html = ' '; document. write(html); } 腳本>
表格
;
$(".icons li").mousemove(function(){
$(this).addClass("icons-move");
});
$(".icons li").mouseout(function(){
$(this).removeClass("icons-move");
});
$(".icons li").mousedown(function(){
$(".icons li").removeClass("icons-focus");
$(this). addClass(" icons-focus");
//改變目前的索引
$(".icons li").css("z-index",0);
$(this).css ("z -index",1);
});
$(".icons li").dblclick(function(){
alert("雙擊");
});
// 按鍵事件
$(document).keyup(function(event){
var UP=38;
var DOWM=40;
var ENTER=13;
var elem=$(".icons-focus");
if(elem.html()=="undefined")return;
if (event.keyCode == UP ) ) {
$(".icons li").removeClass("icons-focus");
elem.prev().addClass("icons-focus");
if( event.keyCode==DOWM){
$(".icons li").removeClass("icons-focus");
elem.next().addClass("icons-focus");
}
//回車打開選中的圖示
if(event.keyCode==ENTER){
var open=$(".icons-focus");警報(“確定進入” )
}
});
//圖示拖曳
$(".icons li").draggable();
//註冊resize事件
$(".window").draggable({containment: 'parent'});
$(".window").ressized({containment: 'parent'});
腳本>
身體>
CSS程式碼:
複製程式碼複製程式碼複製程式碼程式碼如下:
@CHARSET "UTF-8"; 正文,html { 溢出:隱藏; 高度:100%; 寬度:100%; 邊距: 0px; 內邊距:0px; } .工作{ 高度:100%; 寬度:100%; 背景圖片: url("../images /untitled.png"); 背景重複:不重複; 背景顏色:rgb(235, 236, 238); 內邊距:20px; } .working ul { 高度:100%; 位置:相對; } .working ul li { 位置:絕對; 顯示:塊; 寬度:90px; 高度:90px; 文字對齊:居中; 邊距:0px 10px 10px 10px; 浮動:左; 邊框:繼承1px繼承; 浮動:左; 邊框:繼承1px繼承; 溢出:隱藏; > 遊標:指針; } .taskbar { 位置:絕對; 高度:35px; 行高:35px; 寬度:100%; 底部: 0px; 背景顏色:#CCC; z 索引:999; 濾鏡:alpha(不透明度= 80); 不透明度:0.8; 內邊距:0px 10pxxx ; } .menu { 顯示:塊; 寬度:50px; 高度:30px; 浮動:左; } .menu-list { 位置:絕對; 左:0px; 底部:35px; 寬度:350px; 高度:500px; 邊框:#CCC 1px 實心> 高度:500px; 邊框:#CCC 1px 實心;顏色:白色; 濾鏡:alpha(不透明度= 90); 不透明度:0.9; 邊框半徑:5px; 顯示:無; } ul { 邊距:0px; 內邊距:0px; } .menu-icon { 遊標:指針; } .menu-icon ul li { 顯示:塊; 寬度:15px; 高度:15px; 浮動:左; 邊距:1px; 背景顏色:白色; 邊框半徑: 3px; } .menu-icon:hover li { 背景顏色:紅色; } .icons li img { 最大高度:70px; 最大寬度:90px; } .text { 位置:靜態; 高度:20px; 行高:20px; 寬度:100%; 邊距:0px ; 字體大小:12px; 字體系列:微軟雅黑; 顏色:白色; } .icons-move { 邊框:rgb(161, 194, 219 ) 1px 實心; 背景顏色:rgb(194, 208, 226); 過濾器:alpha(不透明度= 60); 不透明度:0.6; 邊框半徑:3px; 🎜>} .icons-focus { 邊框:rgb(161, 194, 219) 1px 實心; 背景顏色:rgb(194, 208, 226); 背景顏色:rgb(194, 208, 226); 濾光片不透明度= 100); 不透明度:1; 邊框半徑:3px; } .window { 高度:200px; 寬度:200px; 高度:200px; 寬度:200px; 高度:200px; 寬度:200px; :#CCC 1px 實心; 背景顏色:白色; 邊框半徑:5px; 位置:絕對; 頂部:0px; z 索引:10; } /* * 右鍵選單 */ .content-menu { 位置:絕對; 寬度:150px; 高度:自動; 背景顏色:rgb (255, 255, 255); 邊框:#CCC 1px 實心; 顯示:無; 邊框半徑:5px; z-index:999; } } . content-menu ul { 邊距:0px; 內邊距:0px; } .content-menu ul li { 列表樣式:無; 行高: 30px; 高度:30px; 邊距:3px 0px; 內邊距:0px; 字體大小:13px; } .content-menuul li a{menuul li a{menuul li a{menuul li a{menuul li a{menu text-decoration:none; 顯示:塊; 字體系列:微軟雅黑; 內邊距:0px 5px; 寬度:140px; 高度:100% ; 顏色:#333; 大綱:無; } .content-menu ul li a:hover { 背景顏色:#DDD; } .content-menu ul hr { 邊距:1px 0px; 高度:0px; 邊框:0px;
邊框底部:#CCC 1px 實心; }