ycc-engine
Version:
Mini and powerful canvas engine for creating App or Game.
144 lines (126 loc) • 5.67 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);
}
.content{
margin-left:20%;
position:fixed;
top:0;
bottom:0;
}
.content iframe{
height:100%;
}
@media screen and (max-width: 640px) {
.sidebar{
position: relative;
width:100%;
}
.content{
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('./multi-touch/');
}
}
</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-u-12-12" style="text-align: center">
<!--<p style="letter-spacing:normal;">
<span>QQ交流群：439366057</span> <br>
<a href="https://jq.qq.com/?_wv=1027&k=5wfSP2k">【励志前端web技术交流群】</a>
</p>-->
<div>微信公众号</div>
<img src="./zgh.png" alt="" style="max-width: 150px;">
</div>
<hr>
<ul class="pure-menu-list">
<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('./performance-monitor/',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('./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>
<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('./ui-event/',this)"><a href="#" class="pure-menu-link">事件系统</a></li>
<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('./smooth-line/',this)"><a href="#" class="pure-menu-link">平滑的折线图</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('./multi-touch/',this)" style="background-color: #ccc;"><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">根据json数组渲染示例</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>
<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('./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>
<li class="pure-menu-item" onclick="goToDemo('./sequence-frame-animation/',this)"><a href="#" class="pure-menu-link">序列帧动画示例</a></li>
</ul>
<br>
<div class="pure-g">
<div class="pure-u-1-12"></div>
<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>
</div>
</div>
<br>
<div class="pure-u-12-12">
<p style="letter-spacing:normal;">
<span>QQ交流群：439366057</span> <br>
<a href="https://jq.qq.com/?_wv=1027&k=5wfSP2k">前端web技术交流群</a>
</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>