js代码:
首頁 > web前端 > js教程 > 主體

js模仿windows桌面圖示排列演算法具體實作(附圖)_javascript技巧

WBOY
發布: 2016-05-16 17:32:07
原創
1456 人瀏覽過

注意:需要引入Jquery
如果需要全部功能,請引入jquery-ui和jquery-ui.css
截圖:
js模仿windows桌面圖示排列演算法具體實作(附圖)_javascript技巧 
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 = 'js模仿windows桌面圖示排列演算法具體實作(附圖)_javascript技巧';
    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 實心; }
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板