我们都使用过微软的操作系统，这些都是c/s架构的程序，拥有绚丽的界面和强大的功能！这些都让我们b/s架构的望尘默哀，但是今天我们将使用jTopo来实现一个Web版的Win7桌面操作系统！运行效果如下：
实现源码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>——jTopo</title>
<style>
body{
width:1024px;
height:100%;
margin:0 auto;
}
#xttblog {
border: 1px solid #aaa;
border-bottom: 0;
background: #eee;
position: absolute;
list-style: none;
margin: 0;
padding: 0;
display: none;
}
#xttblog li a {
display: block;
padding: 10px;
border-bottom: 1px solid #aaa;
cursor: pointer;
width:100px;
}
#xttblog li a:hover {
background: #fff;
}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jtopo-0.4.8-min.js"></script>
<script src="js/toolbar.js"></script>
<script src="js/site.js"></script>
</head>
<body>
<canvas id="canvas" width="1024px" height="640px"></canvas>
<ul id="xttblog" style="display:none;">
<li><a>打开</a></li>
<li><a>管理</a></li>
<li><a>删除</a></li>
<li><a>创建快捷键</a></li>
<li><a>重命名</a></li>
<li><a>属性</a></li>
</ul>
<script type="text/javascript">
var currentNode = null;
function handler(event){
if(event.button == 2){// 右键
// 当前位置弹出菜单（div）
$("#xttblog").css({
top: event.pageY,
left: event.pageX
}).show();
}
}
$(document).ready(function(){
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas);
var scene = new JTopo.Scene();
stage.showToolbar = false;
scene.mode = 'select';
scene.setBackground('img/win7/desktop.png');
var node = new JTopo.Node("计算机");
node.setImage('img/win7/mycomputer.png', true);
node.setLocation(20, 30);
scene.add(node);
// 绑定右键菜单
node.addEventListener('mouseup', function(event){
currentNode = this;
handler(event);
});
var recycleNode = new JTopo.Node("回收站");
recycleNode.setImage('img/win7/recycle.png', true);
recycleNode.setLocation(20, 30+72);
scene.add(recycleNode);
recycleNode.addEventListener('mouseup', function(event){
currentNode = this;
handler(event);
});
for(var i=1; i<3; i++){
for(var j=0; j<2; j++){
var node = new JTopo.Node();
if(Math.random() > 0.7){
node.setImage('img/win7/word.png', true);
node.text = "文档";
}else if(Math.random() > 0.3){
node.setImage('img/win7/folder.png', true);
node.text = "文件夹"+i+'-'+j;
}else{
node.setImage('img/win7/excel.png', true);
node.text = "表格";
}
node.setLocation(20 + i*72, 30 + j*72);
scene.add(node);
}
}
stage.add(scene);
stage.click(function(event){
if(event.button == 0){// 右键
// 关闭弹出菜单（div）
$("#xttblog").hide();
}
});
$("#xttblog a").click(function(){
var text = $(this).text();
if(text == '删除该节点'){
scene.remove(currentNode);
currentNode = null;
}if(text == '撤销上一次操作'){
currentNode.restore();
}else{
currentNode.save();
}
if(text == '更改颜色'){
currentNode.fillColor = JTopo.util.randomColor();
}else if(text == '顺时针旋转'){
currentNode.rotate += 0.5;
}else if(text == '逆时针旋转'){
currentNode.rotate -= 0.5;
}else if(text == '放大'){
currentNode.scaleX += 0.2;
currentNode.scaleY += 0.2;
}else if(text == '缩小'){
currentNode.scaleX -= 0.2;
currentNode.scaleY -= 0.2;
}
$("#xttblog").hide();
});
});
</script>
</body>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载。原文地址：http://www.xttblog.com/?p=424
： » 使用jTopo制作Web版Win7操作系统
原创文章，作者：kepupublish，如若转载，请注明出处：https://blog.ytso.com/tech/aiops/251139.html