|
|
<!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>
|
