使用jTopo制作Web版Win7操作系统

HTML5 herman 2705浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

我们都使用过微软的操作系统,这些都是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)!可加作者微信号1:xmtxtt(5000人已满),微信号2:codedq(5000人已满),微信号3:xttblog(超2800)。备注:“xttblog”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!

本文原文出处:业余草: » 使用jTopo制作Web版Win7操作系统