You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
332 lines
11 KiB
332 lines
11 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta
|
|
http-equiv="Cache-Control"
|
|
content="no-cache, no-store, must-revalidate"
|
|
/>
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|
<meta http-equiv="Expires" content="0" />
|
|
<!-- <link rel="shortcut icon" type="image/x-icon" href="images/logo.png"> -->
|
|
<link rel="stylesheet" type="text/css" href="./css/libs/reset.css" />
|
|
<!-- <link rel="stylesheet" type="text/css" href="./iconfont/iconfont.css">
|
|
<link rel="stylesheet" type="text/css" href="./css/swiper.min.css"> -->
|
|
<!-- <link rel="stylesheet" type="text/css" href="./js/libs/layui/css/layui.css" media="all"> -->
|
|
<link rel="stylesheet" type="text/css" href="./css/libs/animate.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="./css/common.css" />
|
|
<link rel="stylesheet" type="text/css" href="./css/style.css" />
|
|
<!--[if lt IE 9]>
|
|
<script src="js/html5shiv.js"></script>
|
|
<script src="js/respond.min.js"></script>
|
|
<![endif]-->
|
|
<title>首页</title>
|
|
</head>
|
|
|
|
<!-- <div class="box_pdf">
|
|
<a
|
|
href="/media/pdf/AELOS PRO 3 使用手册V1.42-基于镜像1.0.4，软件版本2.0.0(含)以上.pdf"
|
|
>编程学习 看pdf open</a
|
|
>
|
|
</div> -->
|
|
<!-- https://animate.style/ -->
|
|
<body>
|
|
<div class="contanier">
|
|
<div class="return">返回</div>
|
|
<div class="flex-container">
|
|
<ul class="flex-left">
|
|
<li class="flex-item animate__animated animate__backInLeft">
|
|
<a href="javascript:;" alt="">编程系统</a>
|
|
<img src="/images/browsers/chrome.png" alt="" />
|
|
</li>
|
|
<li class="flex-item animate__animated animate__backInLeft">
|
|
<a style="color: yellow;" href="scene_presentation.html" alt="">场景演示</a>
|
|
<img src="/images/browsers/iexplore.png" alt="" />
|
|
</li>
|
|
<li class="flex-item animate__animated animate__backInLeft">
|
|
<a style="color: yellow;" onclick="showPDF2()">编程学习</a>
|
|
<img src="/images/browsers/safari.png" alt="" />
|
|
</li>
|
|
</ul>
|
|
<div class="flex-middle">中间机器人图</div>
|
|
<ul class="flex-right">
|
|
<li class="flex-item animate__animated animate__fadeInTopRight">
|
|
<img src="/images/browsers/iexplore.png" alt="" />
|
|
<a href="javascript:;" alt="">实战竞赛</a>
|
|
</li>
|
|
<li class="flex-item animate__animated animate__fadeInTopRight">
|
|
<img src="/images/browsers/chrome.png" alt="" />
|
|
<a href="javascript:;" alt="">作品展示</a>
|
|
</li>
|
|
<li class="flex-item flex-item-link animate__animated animate__fadeInTopRight">
|
|
<img src="/images/browsers/safari.png" alt="" />
|
|
<!-- ai_chat.html -->
|
|
<a style="color: yellow;" href="javascript:;" alt="">AI数字人</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="my-pdf"></div>
|
|
|
|
|
|
<!-- 静态图片 -->
|
|
<img src="./images/33e2e72d9a0c855f036b4cb55448f44af67a0635.webp" alt="静态webp">
|
|
<img src="./images/azpx0-52d5m.webp" alt="动态webp">
|
|
|
|
<!-- <picture>
|
|
<source media="(min-width:650px)" srcset="./images/azpx0-52d5m.webp">
|
|
<source media="(min-width:465px)" srcset="https://static.jyshare.com/libs/images/code-icon-script.png">
|
|
<img src="./images/azpx0-52d5m.webp" style="width:auto;">
|
|
</picture> -->
|
|
|
|
<!-- 动态图片 -->
|
|
<!-- <video autoplay loop muted playsinline>
|
|
<source src="./images/azpx0-52d5m.webp" type="image/webp">
|
|
Your browser does not support the video tag.
|
|
</video> -->
|
|
|
|
<!-- 菜单3D效果 -->
|
|
<!-- <div class="show-nav">
|
|
<ul id="showcase">
|
|
<li class="menu-item a">编程系统</li>
|
|
<li class="menu-item b">场景演示</li>
|
|
<li class="menu-item c">编程学习</li>
|
|
<li class="menu-item d">实战竞赛</li>
|
|
<li class="menu-item e">作品展示</li>
|
|
<li class="menu-item f">AI数字人</li>
|
|
</ul>
|
|
<div id="nav" class="noselect">
|
|
<button class="left">←</button>
|
|
<button class="right">→</button>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="show-nav">
|
|
<div class="container">
|
|
<div class="carousel">
|
|
<div class="item a">编程系统</div>
|
|
<div class="item b"><a href="scene_presentation.html" alt="">场景演示</a></div>
|
|
<div class="item c"><a onclick="showPDF2()">编程学习</a></div>
|
|
<div class="item d">实战竞赛</div>
|
|
<div class="item e">作品展示</div>
|
|
<div class="item f"><a href="ai_chat.html" alt="">AI数字人</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="next">Next</div>
|
|
<div class="prev">Prev</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript" src="/js/libs/jquery-3.7.1.min.js"></script>
|
|
<script type="text/javascript" src="/js/libs/flexible.js"></script>
|
|
<!-- 弹出框 -->
|
|
<script type="text/javascript" src="/js/libs/layer/layer.js"></script>
|
|
<!-- pdf控件 -->
|
|
<script type="text/javascript" src="/js/plugins/pdfobject.js"></script>
|
|
<!-- 粒子插件2个 -->
|
|
<!-- <script type="text/javascript" src="/js/plugins/particles.min.js"></script>
|
|
<script type="text/javascript" src="/js/plugins/app.js"></script> -->
|
|
<!-- 菜单3D效果2个 -->
|
|
<script type="text/javascript" src="js/plugins/jquery.reflection.js"></script>
|
|
<script type="text/javascript" src="js/plugins/jquery.cloud9carousel.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
function showPDF() {
|
|
var pdf = document.createElement('embed')
|
|
pdf.src =
|
|
'/media/pdf/AELOS PRO 3 使用手册V1.42-基于镜像1.0.4，软件版本2.0.0(含)以上.pdf'
|
|
pdf.type = 'application/pdf'
|
|
pdf.width = '100%'
|
|
pdf.height = 'calc(100vh)'
|
|
document.getElementById('pdf-container').appendChild(pdf)
|
|
}
|
|
|
|
function showPDF2() {
|
|
PDFObject.embed(
|
|
'/media/pdf/AELOS PRO 3 使用手册V1.42-基于镜像1.0.4，软件版本2.0.0(含)以上.pdf',
|
|
'#my-pdf'
|
|
)
|
|
}
|
|
|
|
$('.flex-item-link').on('click', function () {
|
|
$(this).find('img').addClass('active animate__animated animate__zoomInDown');
|
|
// $(this).find('img').on('click', function () {
|
|
// const _this = $(this)
|
|
// setTimeout(function () {
|
|
// _this.removeClass('animate__zoomInDown').addClass('animate__animated animate__backOutRight')
|
|
// setTimeout(function(){
|
|
// window.top.location.href = 'ai_chat.html';
|
|
// return false;
|
|
// },1000)
|
|
// }, 1000)
|
|
// })
|
|
|
|
const _this = $(this)
|
|
setTimeout(function () {
|
|
_this.find('img').removeClass('animate__zoomInDown').addClass('animate__animated animate__backOutRight')
|
|
setTimeout(function(){
|
|
window.top.location.href = 'ai_chat.html';
|
|
return false;
|
|
},1000)
|
|
}, 2000)
|
|
})
|
|
|
|
$('.return').on('click', function () {
|
|
$('#my-pdf').removeClass('pdfobject-container')
|
|
$('#my-pdf').children().remove()
|
|
window.location.reload();
|
|
})
|
|
// 菜单切换
|
|
var showcase = $('#showcase')
|
|
showcase.Cloud9Carousel({
|
|
yOrigin: 52,
|
|
yRadius: 40,
|
|
itemClass: 'menu-item',
|
|
// mirror: {
|
|
// gap: 12,
|
|
// height: 0.2
|
|
// },
|
|
buttonLeft: $('#nav > .left'),
|
|
buttonRight: $('#nav > .right'),
|
|
autoPlay: 1,
|
|
bringToFront: true,
|
|
onLoaded: function () {
|
|
showcase.css('visibility', 'visible')
|
|
showcase.css('display', 'none')
|
|
showcase.fadeIn(1500)
|
|
},
|
|
})
|
|
|
|
$('#nav > button').click(function (e) {
|
|
var b = $(e.target).addClass('down')
|
|
setTimeout(function () {
|
|
b.removeClass('down')
|
|
}, 80)
|
|
})
|
|
|
|
$(document).keydown(function (e) {
|
|
switch (e.keyCode) {
|
|
/* left arrow */
|
|
case 37:
|
|
$('#nav > .left').click()
|
|
break
|
|
|
|
/* right arrow */
|
|
case 39:
|
|
$('#nav > .right').click()
|
|
}
|
|
})
|
|
|
|
|
|
// 菜单3D效果
|
|
var carousel = $(".carousel"),
|
|
items = $(".item"), // 轮播图的每一项
|
|
itemCount = items.length,
|
|
currdeg = 0,
|
|
autoRotateInterval,
|
|
autoRotateEnabled = true; // 标记是否启用自动旋转
|
|
rotationDuration = 2000; // 旋转时间，单位为毫秒
|
|
|
|
$(".next").on("click", { d: "n" }, btnRotate);
|
|
$(".prev").on("click", { d: "p" }, btnRotate);
|
|
|
|
// 绑定点击事件
|
|
items.on("click", function() {
|
|
var index = $(this).index(); // 获取被点击项的索引
|
|
rotateToItem(index); // 旋转到指定项
|
|
});
|
|
|
|
// 开始自动旋转
|
|
function startAutoRotate() {
|
|
if (autoRotateInterval) {
|
|
clearInterval(autoRotateInterval);
|
|
}
|
|
|
|
autoRotateInterval = setInterval(function() {
|
|
// 6个60
|
|
// 4个90
|
|
currdeg = currdeg - 60; // 向左旋转，每次 60 度
|
|
updateTransform();
|
|
}, rotationDuration);
|
|
}
|
|
|
|
// 停止自动旋转
|
|
function stopAutoRotate() {
|
|
clearInterval(autoRotateInterval);
|
|
}
|
|
|
|
// 旋转到指定项
|
|
function rotateToItem(index) {
|
|
var itemAngle = 360 / itemCount; // 计算每一项的角度
|
|
var targetDeg = -index * itemAngle; // 计算目标角度
|
|
var deltaDeg = targetDeg - currdeg; // 计算旋转的角度差
|
|
|
|
// 6个 如果旋转角度差大于 180 度，则选择顺时针旋转
|
|
// 4个 90
|
|
if (Math.abs(deltaDeg) > 180) {
|
|
deltaDeg = (deltaDeg > 0 ? deltaDeg - 360 : deltaDeg + 360);
|
|
}
|
|
|
|
// 设置旋转的时间和缓动效果
|
|
carousel.css({
|
|
// transition: "transform " + (rotationDuration / 1000) + "s ease-out",
|
|
"-webkit-transform": "rotateY(" + (currdeg + deltaDeg) + "deg)",
|
|
"-moz-transform": "rotateY(" + (currdeg + deltaDeg) + "deg)",
|
|
"-o-transform": "rotateY(" + (currdeg + deltaDeg) + "deg)",
|
|
"transform": "rotateY(" + (currdeg + deltaDeg) + "deg)"
|
|
});
|
|
|
|
// 更新当前旋转角度
|
|
currdeg += deltaDeg;
|
|
|
|
// 触发旋转后停止自动旋转
|
|
stopAutoRotate();
|
|
|
|
// 确保在旋转完成后继续自动旋转
|
|
setTimeout(function() {
|
|
if (autoRotateEnabled) {
|
|
startAutoRotate();
|
|
}
|
|
}, rotationDuration); // 旋转时间与自动旋转间隔匹配
|
|
}
|
|
|
|
// 更新 transform 样式
|
|
function updateTransform() {
|
|
carousel.css({
|
|
"-webkit-transform": "rotateY(" + currdeg + "deg)",
|
|
"-moz-transform": "rotateY(" + currdeg + "deg)",
|
|
"-o-transform": "rotateY(" + currdeg + "deg)",
|
|
"transform": "rotateY(" + currdeg + "deg)"
|
|
});
|
|
}
|
|
|
|
function btnRotate(e){
|
|
// 6个60
|
|
// 4个90
|
|
if(e.data.d=="n"){
|
|
currdeg = currdeg - 60;
|
|
}
|
|
if(e.data.d=="p"){
|
|
currdeg = currdeg + 60;
|
|
}
|
|
|
|
updateTransform()
|
|
|
|
// 触发旋转后停止自动旋转
|
|
stopAutoRotate();
|
|
|
|
// 确保在旋转完成后继续自动旋转
|
|
setTimeout(function() {
|
|
if (autoRotateEnabled) {
|
|
startAutoRotate();
|
|
}
|
|
}, rotationDuration); // 旋转时间与自动旋转间隔匹配
|
|
}
|
|
|
|
// 页面加载完成后开始自动旋转
|
|
$(document).ready(function() {
|
|
startAutoRotate();
|
|
});
|
|
</script>
|
|
</html>
|