公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
我们都使用过微软的操作系统，这些都是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
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » 使用jTopo制作Web版Win7操作系统