模拟多桌面
2011-12-04 01:02
141 查看
这段时间学习下linux,觉得linux的多桌面不错,于是顺便用js实现一个,虽说不知道有什么用,就当玩玩。
PS:颜色的设定没有考虑,桌面多了颜色就会出错。
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; width: 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; width: 120px; height: 30px; margin-bottom: 1px; background: #ff8c00; cursor: pointer;} #desktop_list{ position: absolute; top:0; left: 0; width: 100%; height: 100%;} .desktop_item{ position: absolute; width: 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>
相关文章推荐
- c# 模拟windows桌面鼠标拖选 张宇轩
- delphi 在桌面屏幕上模拟鼠标单击
- 实现模拟自动化来操作桌面
- Delphi&C#代码模拟“显示桌面”的功能
- 模拟android桌面的滑动翻页效果
- 模拟window桌面实现
- 虚拟桌面模拟查找点击自绘控件
- 关于easyui模拟win2012桌面的一个例子系列
- 模拟桌面刷新代码
- html+css+js 模拟win7桌面
- Delphi&C#代码模拟“显示桌面”的功能(使用CreateOleObject('Shell.Application'))
- 模拟iphone桌面切屏carousel小类库
- WPF案例 (四) 模拟Windows7桌面任务栏
- 个人代码库のC#千千静听 - 桌面歌词 (功能模拟)
- Ext js框架模拟Windows桌面菜单管理模板
- Windows 模拟用户点击桌面图标(双击、右击)
- 模拟window桌面实现
- Delphi代码模拟“显示桌面”的功能