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.
|
|
<!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="stylesheet" type="text/css" href="css/libs/reset.css" /> <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/index.css" /> <!--[if lt IE 9]>
<script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <![endif]--> <title>首页</title> </head><body> <div class="ai-wrapper"> <video class="ai-bg" src="./images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video> <div class="ai-header-wrapper"> <div class="ai-header"> <!-- <div class="header-btn header-home"><span></span><p>首页</p></div> --> <div class="header-title"> <h2>AI编程机器人体验系统</h2> </div> <div class="header-btn header-login"><span></span><p>登录</p></div> </div> </div> <div class="ai-index"> <!-- no-box-style --> <ul class="index-list list-left"> <li class="animate__animated animate__backInLeft"> <!-- page1.html --> <a id="page1" href="javascript:;"> <p>编程体验</p> <span>Programming experience</span> <img src="./images/index-an1.webp" alt="编程体验" /> </a> </li> <li class="animate__animated animate__backInLeft"> <!-- page2.html --> <a id="page2" href="javascript:;"> <p>场景演示</p> <span>Scene presentation</span> <img src="./images/index-an2.webp" alt="场景演示" /> </a> </li> <li class="animate__animated animate__backInLeft"> <a href="javascript:;"> <p>AI资源库</p> <span>AI resource library</span> <img src="./images/index-an3.webp" alt="AI资源库" /> </a> </li> </ul> <div class="index-middle"> <img class="ai-human" src="./images/animation.webp" alt="机器人" /> <img class="ai-bottom" src="./images/an-bottom.webp" alt="底部光效" /> </div> <!-- no-box-style --> <ul class="index-list list-right"> <li class="animate__animated animate__backInRight"> <a id="page4" href="javascript:;"> <p>实战竞赛</p> <span>Actual combat</span> <img src="./images/index-an4.webp" alt="实战竞赛" /> </a> </li> <li class="animate__animated animate__backInRight"> <a href="javascript:;"> <p>作品展示</p> <span>Work display</span> <img src="./images/index-an5.webp" alt="作品展示" /> </a> </li> <li class="animate__animated animate__backInRight"> <a id="aiChat" href="javascript:;"> <p>AI数字人</p> <span>AI digital human</span> <img src="./images/index-an6.webp" alt="AI数字人" /> </a> </li> </ul> </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"> $(function () { $('.list-left li').hover( function() { $(this).removeClass('animate__backInLeft').addClass('animate__bounce'); }, function() { $(this).removeClass('animate__bounce') } );
$('.list-right li').hover( function() { $(this).removeClass('animate__backInRight').addClass('animate__headShake'); }, function() { $(this).removeClass('animate__headShake') } );
$('.index-list li').on('click', function () { const _this = $(this) $('.ai-human').css('animation-duration', '0.2s').addClass('animate__animated animate__flash') setTimeout(function () { $('.list-left li').removeClass('animate__backInLeft').addClass('animate__animated animate__backOutLeft') $('.list-right li').removeClass('animate__backInRight').addClass('animate__animated animate__backOutRight') setTimeout(function(){ // window.top.location.href = 'ai_chat.html'; const href = _this.find('a').attr('id'); if (href === 'page1') { window.location.href = 'page1.html'; } else if (href === 'page2') { window.location.href = 'page2.html'; } else if (href === 'page4') { window.location.href = 'page4.html'; } else if (href === 'aiChat') { window.location.href = 'ai_chat.html'; } else { // 其他情况的处理逻辑 } return false; },1000) }, 1000) }) })</script></html>
|
