ycc.js
Version:
Mini and powerful canvas engine for creating App or Game.
153 lines (130 loc) • 5.74 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<title>示例首页</title>
<link href="https://cdn.bootcss.com/pure/1.0.0/pure.css" rel="stylesheet">
<style>
.sidebar{
position: fixed;
top: 0;
bottom: 0;
}
.sidebar .pure-menu-heading {
border-bottom: none;
font-size: 150%;
color: rgb(75, 113, 151);
}
.pure-menu-scrollable{
width:290px;
}
.content{
margin-left:300px;
position:fixed;
top:0;
bottom:0;
}
.content iframe{
height:100%;
}
@media screen and (max-width: 640px) {
.sidebar{
position: relative;
width:100%;
}
.pure-menu-scrollable{
width:100%;
}
.content{
display: none;
position: relative;
width:100%;
margin-left: 0;
border-top:1px solid #ccc;
margin-top: 10px;
}
.content iframe{
height:auto;
}
}
</style>
<script>
function goToDemo(url,dom){
if(document.documentElement.clientWidth<640){
location.href = url;
return null;
}
console.log(url,dom);
// 加入选中的颜色
if(dom){
document.querySelectorAll('.pure-menu-item').forEach(function (item) {
item && (item.style.backgroundColor='transparent');
});
dom.style.backgroundColor='#ccc';
}
document.demo.location.href = url;
}
window.onload = function () {
if(document.documentElement.clientWidth>=640){
goToDemo('./hello-ycc/');
}
}
</script>
</head>
<body>
<div class="pure-g ">
<div class="pure-menu pure-menu-scrollable custom-restricted-width pure-u-1-5 sidebar" id="nav-bar">
<span class="pure-menu-heading">Ycc引擎示例列表</span>
<div class="pure-g">
<div class="pure-u-1-12"></div>
</div>
<hr>
<ul class="pure-menu-list">
<li class="pure-menu-item" onclick="goToDemo('./hello-ycc/',this)" style="background-color: #ccc;"><a href="#" class="pure-menu-link">Hello,Ycc!</a></li>
<hr>
<li class="pure-menu-item" onclick="goToDemo('./ui-test/',this)"><a href="#" class="pure-menu-link">UI示例</a></li>
<li class="pure-menu-item" onclick="goToDemo('./ui-children/',this)"><a href="#" class="pure-menu-link">UI嵌套示例</a></li>
<li class="pure-menu-item" onclick="goToDemo('./smooth-line/',this)"><a href="#" class="pure-menu-link">折线UI示例</a></li>
<li class="pure-menu-item" onclick="goToDemo('./scroller-rect/',this)"><a href="#" class="pure-menu-link">滚动区UI示例</a></li>
<li class="pure-menu-item" onclick="goToDemo('./polygon-of-star/',this)"><a href="#" class="pure-menu-link">多边形示例-五角星</a></li>
<li class="pure-menu-item" onclick="goToDemo('./map-of-china/',this)"><a href="#" class="pure-menu-link">多边形示例-中国地图</a></li>
<li class="pure-menu-item" onclick="goToDemo('./render-by-json/',this)"><a href="#" class="pure-menu-link">UI示例-根据json数组渲染</a></li>
<li class="pure-menu-item" onclick="goToDemo('./sequence-frame-animation/',this)"><a href="#" class="pure-menu-link">帧动画示例-序列帧</a></li>
<li class="pure-menu-item" onclick="goToDemo('./timer-animation/',this)"><a href="#" class="pure-menu-link">帧动画示例-碰壁的小球</a></li>
<li class="pure-menu-item" onclick="goToDemo('./ui-ellipse/',this)"><a href="#" class="pure-menu-link">帧动画示例-旋转的椭圆</a></li>
<li class="pure-menu-item" onclick="goToDemo('./tree/',this)"><a href="#" class="pure-menu-link">树结构示例</a></li>
<li class="pure-menu-item" onclick="goToDemo('./graph/',this)"><a href="#" class="pure-menu-link">图结构示例</a></li>
<hr>
<li class="pure-menu-item" onclick="goToDemo('./multiple-layer/',this)"><a href="#" class="pure-menu-link">图层示例</a></li>
<li class="pure-menu-item" onclick="goToDemo('./image-loader/',this)"><a href="#" class="pure-menu-link">图片加载示例</a></li>
<li class="pure-menu-item" onclick="goToDemo('./ui-event/',this)"><a href="#" class="pure-menu-link">事件系统示例</a></li>
<li class="pure-menu-item" onclick="goToDemo('./multi-touch/',this)"><a href="#" class="pure-menu-link">手势支持示例</a></li>
<hr>
<li class="pure-menu-item" onclick="goToDemo('./performance-monitor/',this)"><a href="#" class="pure-menu-link">综合示例-性能测试</a></li>
<li class="pure-menu-item" onclick="goToDemo('./paper-selector/',this)"><a href="#" class="pure-menu-link">综合示例-框选操作</a></li>
<li class="pure-menu-item" onclick="goToDemo('./simple-editor/',this)"><a href="#" class="pure-menu-link">综合示例-迷你画板</a></li>
<hr>
<li class="pure-menu-item" onclick="goToDemo('./game-do-not-touch-white-rect/',this)"><a href="#" class="pure-menu-link">游戏-别踩白块</a></li>
<li class="pure-menu-item" onclick="goToDemo('./game-calm-down/',this)"><a href="#" class="pure-menu-link">游戏-保持冷静</a></li>
<li class="pure-menu-item" onclick="goToDemo('./game-super-mario/',this)"><a href="#" class="pure-menu-link">游戏-超级玛丽</a></li>
</ul>
<hr>
<div class="pure-u-11-12">
<a href="https://github.com/lizhiqianduan/ycc/tree/develop" class="pure-button pure-button-primary">项目github</a>
<a href="http://www.lizhiqianduan.com/blog" class="pure-button">作者博客</a>
<br><br><br><br>
</div>
<div class="pure-u-12-12">
<!-- <p style="letter-spacing:normal;">-->
<!-- <span>QQ交流群：439366057</span> <br>-->
<!-- </p>-->
</div>
</div>
<div class="pure-u-4-5 content">
<iframe src="" frameborder="0" id="demo" name="demo" class="pure-u-1"></iframe>
</div>
</div>
</body>
</html>
<script src="./common.js"></script>