这段时间学习下linux，觉得linux的多桌面不错，于是顺便用js实现一个，虽说不知道有什么用，就当玩玩。
PS：颜色的设定没有考虑，桌面多了颜色就会出错。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0;}
html,body{ height: 100%;}
#wrap{ position: relative; 100%; height: 100%; overflow: hidden;}
ul{ list-style: none;}
#desktop_set{ z-index: 100; position: fixed; _position: absolute; top:0; right: 0; height: 30px; opacity: 0.7;}
#desktop_nav li{ float: left; 120px; height: 30px; margin-bottom: 1px; background: #ff8c00; cursor: pointer;}
#desktop_list{ position: absolute; top:0; left: 0; 100%; height: 100%;}
.desktop_item{ position: absolute; 100%; height: 100%; color: #fff; font-size: 100px; overflow: hidden}
</style>
</head>
<body>
<div id="wrap">
<div id="desktop_set">
<ul id="desktop_nav">
</ul>
</div>
<div id="desktop_list">
</div>
</div>
<script type="text/javascript">
var desktop_list = $('desktop_list');
desktop_list.queen = [];
var desktop_nav = $('desktop_nav');
function $(id){
return document.getElementById(id);
}
//创建桌面和导航条
function createItem(rows,cols){
var list = document.createDocumentFragment();
var nav = document.createDocumentFragment();
desktop_nav.style.width = cols*120 + 'px';
for(var row = 0; row < rows; row++){
for(var col = 0; col < cols; col++){
var color = '#' + (row * 2) + (row * 2) + (col * 2) + (col * 2) + 0 + 'f';//这里颜色设定有问题
var div = document.createElement('div');
div.innerHTML = row + ':' + col;
div.className = 'desktop_item';
div.style.top = row*100 +'%';
div.style.left = col*100 +'%';
div.style.backgroundColor = color;
list.appendChild(div);
var li = document.createElement('li');
li.row = row;
li.col = col;
li.innerHTML = row + ':' + col;
li.style.background = color;
nav.appendChild(li);
}
}
desktop_list.appendChild(list);
desktop_nav.appendChild(nav);
}
//切换桌面
function changeDesk(list,row,col){
var top = parseInt(list.style.top) || 0;
var left = parseInt(list.style.left) || 0;
var s = list.style;
var queen= list.queen;
for(var i = 0; i < 100; i++){
(function(pos){
var timer = setTimeout(function(){
s.top = top -(pos+1)*(row + top/100) + '%';
s.left = left -(pos+1)*(col + left/100) + '%';
},(pos + 1)*10)
queen.push(timer);
})(i)
}
}
//创建4*4个桌面
createItem(4,4);
desktop_nav.onclick = function(e){
e = e || window.event;
var t = e.target || e.srcElement;
var queen = desktop_list.queen;
if(t.tagName.toLowerCase() == 'li'){
for(var i = 0,len = queen.length; i< len; i++){
clearTimeout(queen[i]);
}
changeDesk(desktop_list,t.row,t.col);
}
}
</script>
</body>
</html>