|
|
<!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/plugins/gridNavigation.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/bg2.mp4" autoplay="autoplay" loop="loop" muted="muted"></video> <div class="ai-header-wrapper"> <div class="ai-header"> <div class="header-left"> <div class="header-btn header-home" onclick="window.location.href='index.html'; return false;"><span></span><p>首页</p></div> </div> <div class="header-title"> <h2>编程体验</h2> </div> <div class="header-btn header-login"><span></span><p>登录</p></div> </div> </div>
<!-- 编程体验 --> <div class="page-content"> <div id="tj_container" class="tj_container"> <span id="tj_prev" class="page-list-btn tj_prev"></span> <div class="tj_wrapper"> <ul class="tj_gallery"> <li> <a href="page1-1.html"> <div class="tj-list-img mask-active"> <img src="images/page1/7.png" alt="" /> <!-- <span></span> --> </div> <p>颜色识别</p> </a> </li> <li> <a href="javascript:;"> <div class="tj-list-img mask-active"> <img src="images/page1/1.png" alt="" /> <!-- <span></span> --> </div> <p>六轴机械臂</p> </a> </li> <li> <a href="javascript:;"> <div class="tj-list-img mask-active"> <img src="images/page1/2.png" alt="" /> <!-- <span></span> --> </div> <p>双足机器人1</p> </a> </li> <li> <a href="javascript:;"> <div class="tj-list-img mask-active"> <img src="images/page1/3.png" alt="" /> <!-- <span></span> --> </div> <p>双足机器人2</p> </a> </li> <li> <a href="javascript:;"> <div class="tj-list-img mask-active"> <img src="images/page1/4.png" alt="" /> <!-- <span></span> --> </div> <p>双足机器人3</p> </a> </li> <li> <a href="javascript:;"> <div class="tj-list-img mask-active"> <img src="images/page1/5.png" alt="" /> <!-- <span></span> --> </div> <p>四足机器狗</p> </a> </li> <li> <a href="javascript:;"> <div class="tj-list-img mask-active"> <img src="images/page1/6.png" alt="" /> <!-- <span></span> --> </div> <p>无人驾驶车</p> </a> </li> </ul> </div> <span id="tj_next" class="page-list-btn tj_next"></span> </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/plugins/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/plugins/jquery.gridnav.js"></script> <script type="text/javascript"> $(function () { $('#tj_container').gridnav({ type: { mode: 'sequpdown', // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows speed: 500, // for fade, seqfade, updown, sequpdown, showhide, disperse, rows easing: '', // for fade, seqfade, updown, sequpdown, showhide, disperse, rows factor: 50, // for seqfade, sequpdown, rows reverse: false, // for sequpdown }, }) // $('.tj_gallery li').on('click', function () { // layer.open({ // type: 2, // 0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外) // title: '测试视频layer', // area: ['12.5rem', '10rem'], // // shade: 0.8, // 默认0.3 不想显示遮罩设置为0 // // maxmin: true, //开启最大化最小化按钮 // shadeClose: true, // content: '/media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4' // }) // }) }) </script> </html>
|