一.項目概述
1.該項目采用了大部分前端知識，完整的復(fù)刻原神官網(wǎng)上所顯示的全內(nèi)容，非常全面和詳細(xì)。希望有興趣的小伙伴萌可以看看和參考一下！?。≡擁椖靠梢宰鳛榇髮W(xué)生畢設(shè)項目（附帶項目答辯ppt）同時也可以作為計算機(jī)專業(yè)的小伙伴的期末大作業(yè)。喜歡的請留下你的足跡吧?。?！
?
項目技術(shù)介紹
HTML:HTML是超文本標(biāo)記語言，（英語：HyperText Markup Language，簡稱：HTML），是一種用來創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言
CSS:CSS是指層疊樣式表，用來對網(wǎng)頁的樣式進(jìn)行修飾，美化，布局
JS:JS——JavaScript，是互聯(lián)網(wǎng)上最流行的腳本語言，被用于HTML和WEB，更可廣泛用于服務(wù)器，PC，筆記本
DOM：是JS操作網(wǎng)頁的接口，全稱為“文檔對象模型”（Document Object Model）。它的作用是將網(wǎng)頁轉(zhuǎn)為一個JS對象，從而可以用腳本進(jìn)行各種操作（比如增刪內(nèi)容）。
jQuery：是繼prototype之后又一個JavaScript框架，是一個快速、簡潔的JavaScript庫，使用戶能更方便的處理HTML documents、events、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互；jQuery能夠使用戶的html頁保持代碼和內(nèi)容分離，即不用再在html中插入一堆js來調(diào)用命令了，只需定義id即可。
項目大部分采用html+css+js,還有一些框架（jquery）和輪播圖的運用（swiper）以及畫布（canvas）
功能實現(xiàn)：頁面跳轉(zhuǎn) ，登錄注冊，輪播圖，音頻播放，視頻播放，hover效果，鼠標(biāo)點擊事件等等
（具體請看代碼和效果）
1.首頁效果展示
2.新聞
?
3.角色
?
4.世界?
?5.漫畫
6.社區(qū)
?
7.賽事
?
8.成長關(guān)愛系統(tǒng)（所有頁面都有，此處只展示一個）
?
9.登錄,注冊
?
?上面的圖片大致展示了所有頁面的效果圖，下面請看代碼展示、
首頁代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>《原神》官方網(wǎng)站-全新3.6版本[盛典與慧業(yè)]上線！</title>
<link rel="icon" type="image/x-icon" href="image\原神logo.ico" /><!--網(wǎng)頁圖標(biāo)-->
<link rel="stylesheet" href="css\index.css" />
<link rel="stylesheet" href="css/font-index..css">
<link rel="stylesheet" href="css/swiper-bundle.min.css">
<link rel="stylesheet" href="css/city.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/login.css">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../package/swiper-bundle.min.css" />
<!-- Demo styles -->
<style>
.swiper {
position: relative;
left: -320px;
width: 640px;
height: 400px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: rgba(38, 18, 12, 0.62);
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-pagination-bullet {
height: 18px;
width: 18px;
background-color: white;
}
</style>
</head>
<body>
<div class="header">
<div class="audio-controller" id="audiu_on">
<img src="image/播放開.png" style="width: 100%;" id="audio_headerimg" />
<audio id="bgMusic">
<source src="audio/原神官網(wǎng)視頻 - 1.最終版(Av55055298,P1).mp3" type="audio/mp3">
</audio>
</div>
<div class="audio-controller" id="audio_off" style="display: none;">
<img src="image/播放關(guān).png" style="width: 100%;" id="audio_headerimg" />
<audio id="bgMusic">
<source src="audio/原神官網(wǎng)視頻 - 1.最終版(Av55055298,P1).mp3" type="audio/mp3">
</audio>
</div>
<div class="header__logo--cut">
<img src="image/原神主頁logo.png">
</div>
<div class="header__navbar">
<div class="header_Cloud"></div>
<div class="header_navitem">
<a href="../原神官網(wǎng)制作/首頁/shouye.html" class="hover-color" style=" text-shadow: 0 0 10px #69e0ff, 0 0 40px #69e0ff, 0 0 40px #69e0ff;
color: #fff;">首 頁</a>
<a href="news.html">新 聞</a>
<a href="./character 2.html">角 色</a>
<a href="./world.html">世 界</a>
<a href="./cartoon.html">漫 畫</a>
<a href="./mihaHomePage.html" target="_blank">社 區(qū)</a>
<a href="./matchReq.html" >賽 事</a>
</div>
</div>
<div style="display: flex;flex-direction: row;align-items: center;margin-left: 340px;">
<span>
<a href="./grow-up-index.html" style="color: #cccccc;margin-right: 20px;" target="_blank;">成長關(guān)愛系統(tǒng)</a>
</span>
<img src="image/下載%20(1).png">
</div>
<button class="header__login">
<span onclick="dlu">      登 錄</span>
<img src="image/登錄.png">
</button>
<div class="mhy-account-flow mhy-account-flow-dialog ys-theme is-pc" style="display: none;" id="login">
<div class="mhy-account-flow-dialog-content">
<div class="mhy-account-flow-login">
<img src="image/mihuayouLOGo.png" class="logo">
<img src="image/X.png" class="close-icon">
</div>
<div class="mhy-account-flow-tabs tabs-flex">
<div class="tab-item active">
<span>驗證碼登錄</span>
</div>
<div class="tab-item">
<span id="mimaloginers">密碼登錄</span>
</div>
</div>
<form>
<div class="mhy-account-flow-form-input">
<div class="input-container">
<input type="tel" placeholder="手機(jī)號注冊/登錄" id="containerinput" maxlength="11">
</div>
<p class="error-text">*手機(jī)號不能為空</p>
<p class="error-text" style="display: none;" id="MobilePhoneFormat">*手機(jī)格式錯誤</p>
</div>
<div class="mhy-account-flow-form-input">
<div class="input-container">
<div class="mhy-toast" style="display: none;">請輸入正確的手機(jī)號</div>
<input type="tel" placeholder="驗證碼" maxlength="6">
<div class="input-inner-btn captcha-login-inner-btn" id="VerificationCode">
獲取驗證碼
</div>
</div>
</div>
<div></div>
<div class="mhy-login-button">
<button type="submit" class="login-btn">登錄</button>
</div>
</form>
<div class="register-bar">
<a href="">登錄遇到問題？</a>
<a href="" class="to-register">立即注冊</a>
</div>
<p class="login-tip">
<span>未注冊的手機(jī)驗證后將自動登錄。注冊/登錄即代表<br>您同意并遵守</span>
<a>《米哈游通行證用戶服務(wù)協(xié)議》</a>
<a href="">《米<br>哈游通行證用戶個人信息及隱私保護(hù)政策》</a>
</p>
</div>
<!-- 密碼登錄 -->
<div class="mhy-account-flow-dialog-content" id="mimalogin" style="display: none;">
<div class="mhy-account-flow-login">
<img src="image/mihuayouLOGo.png" class="logo">
<img src="image/X.png" class="close-icon" id="x2">
</div>
<div class="mhy-account-flow-tabs tabs-flex">
<div class="tab-item">
<span id="yzmloginer">驗證碼登錄</span>
</div>
<div class="tab-item">
<span id="mimaloginer">密碼登錄</span>
</div>
</div>
<form>
<div class="mhy-account-flow-form-input">
<div class="input-container">
<input type="tel" placeholder="手機(jī)號/郵箱">
</div>
</div>
<div class="mhy-account-flow-form-input">
<div class="input-container">
<input type="tel" placeholder="密碼" maxlength="6">
<div class="input-inner-btn captcha-login-inner-btn">
</div>
</div>
</div>
<div></div>
<div class="mhy-login-button">
<button type="submit" class="login-btn">登錄</button>
</div>
</form>
<div class="register-bar">
<a href="">登錄遇到問題？</a>
<a href="" class="to-register">立即注冊</a>
</div>
<p class="login-tip">
<span>登錄即代表您同意并遵守<br>您同意并遵守</span>
<a>《米哈游通行證用戶服務(wù)協(xié)議》</a>
<a href="">《米<br>哈游通行證用戶個人信息及隱私保護(hù)政策》</a>
</p>
</div>
</div>
</div>
<div class="social">
<ul class="social_wx">
<button class="social__btn_off">
<img src="image/箭頭.png" class="social__btn_on_img1">
</button>
<button class="social__btn_on" style="display: none;">
<img src="image/箭頭.png" class="social__btn_on_img2">
<!-- transform: rotate(-180deg); -->
</button>
<li class="social_first">
<p class="wenzi1">關(guān)注我們</p>
<img src="image/微信二維碼.png">
<p class="wenzi2">掃描關(guān)注微信</p>
</li>
<li class="social__item">
<p>官方微博</p>
</li>
<li class="social__item">
<p>TapTap</p>
</li>
<li class="social__item">
<p>官方社區(qū)</p>
</li>
</ul>
</div>
<!-- <div style="position: absolute;z-index: 999;top: 50%;left: 40%;">
<img src="image/中間播放功能.png">
</div> -->
<div class="bgWrap">
<div class="poster__concept">
<video loop="loop" muted="muted" autoplay>
<source src="audio/原神官網(wǎng)視頻 - 1.最終版(Av55055298,P1).mp4" type="audio/mp4">
</video>
<div style="position:absolute;right: 50px;top: 100px;">
<a href="./Card-game.html">
<img src="./img/90a8b69.png" alt="">
</a>
</div>
</div>
<div class="poster__badge">
<img src="image/12禁.png">
</div>
<div class="poster_videoSjxer"></div>
<div class="poster__video--entry">
<img src="image/中間播放功能.png">
<button class="poster_video">
<div class="poster_video1">
<img src="../原神官網(wǎng)制作/首頁/upload/71.webp" alt="">
</div>
</button>
</div>
<div class="ys-download-pc">
<div class="ys-download-pc__qr">
<img src="image/官方二維碼.png" class="ys-download-pc__qr">
<img src="image/二維碼中間.jpg" class="ys-download-pc__qr__icon">
</div>
<div class="ys-download-pc__group">
<a href=""><img src="image/ps4.png"></a>
<a href="./iphone官網(wǎng)/index.html" target="_blank"><img src="image/蘋果下載.png"></a>
</div>
<div class="ys-download__group">
<a href=""><img src="image/TapTap下載.png"></a>
<a href="./iphone官網(wǎng)/index.html"><img src="image/安卓下載.png"></a>
</div>
<div class="ys-download-pc__btn">
<a href=""><img src="image/pc.png" alt=""></a>
</div>
</div>
</div>
<section class="new">
<div class="news__main">
<img src="image/第二大塊.jpg">
<h3>
新聞資訊
</h3>
</div>
<div class="new_Boom">
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<li><a href="javascript:;"><img src="image/1.jpg"></a></li>
</div>
<div class="swiper-slide">
<li><a href="javascript:;"><img src="image/2.jpg"></a></li>
</div>
<div class="swiper-slide">
<li><a href="javascript:;"><img src="image/3.jpg"></a></li>
</div>
<div class="swiper-slide">
<li><a href="javascript:;"><img src="image/4.jpg"></a></li>
</div>
</div>
<div class="swiper-pagination">
</div>
</div>
<div class="news__tab__list">
<ul class="news__tab__list__ul">
<li class="currenters">最新</li>
<li>新聞</li>
<li>公告</li>
<li>活動</li>
</ul>
<div class="tab_con">
<div class="item" style="display: block;">
<li>
<a>
<p class="item_p">《原神》「極鮮！炙膾之夜」網(wǎng)頁活動現(xiàn)已開啟</p>
<p class="item_p2">2023/5/18</p>
</a>
</li>
<li>
<a>
<p class="item_p">《原神》EP - 幽蝶留芳之處</p>
<p class="item_p2">2023/5/18</p>
</a>
</li>
<li>
<a>
<p class="item_p">《原神》「霧海懸謎境」2.2版本活動速遞第二期</p>
<p class="item_p2">2023/10/31</p>
</a>
</li>
<li>
<a>
<p class="item_p">《原神》「神鑄賦形」活動祈愿即將開啟</p>
<p class="item_p2">2023/5/18</p>
</a>
</li>
<li>
<a>
<p class="item_p">《原神》「赤團(tuán)開時」活動祈愿即將開啟</p>
<p class="item_p2">2023/5/18</p>
</a>
</li>
</div>
<div class="item" style="display: none;">
<!-- 新聞 -->
<li>
<a>
<p class="item_p">《原神》EP - 幽蝶留芳之處</p>
<p class="item_p2">2023/5/18</p>
</a>
</li>
<li>
<a>
<p class="item_p">《原神》EP - 幽蝶留芳之處</p>
<p class="item_p2">2023/5/18</p>
</a>
</li>
<li>
<a>
<p class="item_p">《原神》「霧海懸謎境」2.2版本活動速遞第二期</p>
<p class="item_p2">2023/5/18</p>
</a>
</li>
<li>
<a>
<p class="item_p">《原神》「神鑄賦形」活動祈愿即將開啟</p>
<p class="item_p2">2023/5/18</p>
</a>
</li>
<li>
<a>
<p class="item_p">《原神》「赤團(tuán)開時」活動祈愿即將開啟</p>
<p class="item_p2">2023/5/18</p>
</a>
</li>
</div>
<div class="item" style="display: none;">
<!-- 公告 -->
<li>
<a>
<p class="item_p">《原神》祈愿概率公示</p>
<!-- <p class="item_p2">2023/5/18</p> -->
</a>
</li>
<li>
<a>
<p class="item_p">《原神》「韶光撫月，天下人間」2.1版本更新說明</p>
<p class="item_p2">2023/9/01</p>
</a>
</li>
<li>
<a>
<p class="item_p">《原神》「韶光撫月，天下人間」2.1版本更新通知</p>
<p class="item_p2">2023/10/31</p>
</a>
</li>
<li>
<a>
<p class="item_p">《云·原神》限號不刪檔付費測試即將開啟</p>
<p class="item_p2">2023/8/10</p>
</a>
</li>
<li>
<a>
<p class="item_p">《原神》2.0版本「不動鳴神，泡影斷滅」更新說明</p>
<p class="item_p2">2023/7/21</p>
</a>
</li>
</div>
<div class="item" style="display: none;">
<!-- 活動 -->
<li>
<a>
<p class="item_p">《原神》EP - 幽蝶留芳之處</p>
<p class="item_p2">2023/5/18</p>
</a>
</li>
<li>
<a>
<p class="item_p">《原神》EP - 幽蝶留芳之處</p>
<p class="item_p2">2023/5/18</p>
</a>
</li>
<li>
<a>
<p class="item_p">《原神》「霧海懸謎境」2.2版本活動速遞第二期</p>
<p class="item_p2">2023/10/31</p>
</a>
</li>
<li>
<a>
<p class="item_p">《原神》「神鑄賦形」活動祈愿即將開啟</p>
<p class="item_p2">2023/5/18</p>
</a>
</li>
<li>
<a>
<p class="item_p">《原神》「赤團(tuán)開時」活動祈愿即將開啟</p>
<p class="item_p2">2023/5/18</p>
</a>
</li>
</div>
<div class="item" style="display: none;">
<!-- 公告 -->
<li>
<a>
<p class="item_p">「巖港奇珍行記」網(wǎng)頁活動說明</p>
<p class="item_p2">2023/5/02</p>
</a>
</li>
<li>
<a>
<p class="item_p">《原神》月夕祝頌-萬份空月祝福相贈</p>
<p class="item_p2">2023/10/01</p>
</a>
</li>
<li>
<a>
<p class="item_p">“在塵世的相逢”抖音《原神》公測主播招募</p>
<p class="item_p2">2023/9/28</p>
</a>
</li>
<li>
<a>
<p class="item_p">“在塵世的相逢”快手直播《原神》主播招募活動開啟</p>
<p class="item_p2">2023/9/16</p>
</a>
</li>
<li>
<a>
<p class="item_p">“在塵世的相逢”斗魚直播《原神》主播招募活動開啟</p>
<p class="item_p2">2023/9/16</p>
</a>
</li>
</div>
</div>
</div>
</div>
<!-- 地名介紹 -->
<div class="city">
<ul>
<li>
<div class="city__list-item">
<a>
<img src="image/蒙德.jpg" class="city_img">
<img src="image/寶石.png" class="city_imgs">
<p>蒙德城</p>
</a>
<div class="city__list-char" style="background-image: url(image/222.png);"></div>
</div>
</li>
<li>
<div class="city__list-item">
<a>
<img src="image/璃月.jpg" class="city_img">
<img src="image/寶石.png" class="city_imgs">
<p>璃月城</p>
</a>
<div class="city__list-char" style="background-image: url(image/魈.png);"></div>
</div>
</li>
<li>
<div class="city__list-item">
<a>
<img src="image/稻妻.jpg" class="city_img">
<img src="image/寶石.png" class="city_imgs">
<p>稻妻城</p>
</a>
<div class="city__list-char" style="background-image: url(image/神里.png);"></div>
</div>
</li>
<li>
<div class="city__list-item">
<a>
<img src="./image/須彌城.jpg" class="city_img">
<img src="image/寶石.png" class="city_imgs">
<p>須彌城</p>
</a>
<div class="city__list-char" style="background-image: url(image/111.png);"></div>
</div>
</li>
<div class="city__list-item_last">
<a>
<img src="image/lastpng.jpg" class="city_img">
<p>敬請期待</p>
</a>
</div>
</ul>
</div>
</section>
<div class="footer">
<ul class="footer__socialbar">
<li class="footer__socialitem"><a>
<img src=image/新浪微博1..png alt="" id="socialitemImg1">
</a>
</li>
<li class="footer__socialitem"><a><img src="image/微信 (2).png" alt="" id="socialitemImg2"></a></li>
<li class="footer__socialitem"><a><img src="image/qq.png" alt="" id="socialitemImg3"></a></li>
<li class="footer__socialitem">
<div class="share__wrap">
<p>分享至</p>
<ul class="qxtc">
<li><img src="image/QQ空間.png"></li>
<li><img src="image/qq (2).png"></li>
<li><img src="image/微博 (2).png"></li>
<li><img src="image/social-tieba.png"></li>
</ul>
</div>
<a class="share__wrap_Tc">
<img src="image/分享方式.png" alt="" id="socialitemImg4">
</a>
</li>
</ul>
</div>
<img src="image/footer.png" class="footerster">
<div class="fooer"></div>
</body>
<!-- Swiper JS -->
<script src="js/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
<script src="js/header.js"></script>
<script src="js/index.js"></script>
<script src="js/move.js"></script>
<script src="js/jquery.js"></script>
<script src="js/tab_con.js"></script>
<script src="js/movers.js"></script>
</html>
<script>
var videoEntry = document.querySelector('.poster__video--entry');
var posterVideo = document.querySelector('.poster_video1 img');
var videoPlaying = false;
posterVideo.addEventListener('click', function () {
if (!videoPlaying) {
var videoContainer = document.createElement('div');
videoContainer.className = 'video-container';
videoContainer.style.position = 'fixed';
videoContainer.style.top = '10%';
videoContainer.style.left = '25%';
videoContainer.style.width = '50%';
videoContainer.style.height = '50%';
videoContainer.style.background = '#000';
var videoPlayer = document.createElement('video');
videoPlayer.style.width = '100%';
videoPlayer.style.height = '100%';
videoPlayer.autoplay = true;
videoPlayer.controls = true;
var videoSource = document.createElement('source');
videoSource.src = '../原神官網(wǎng)制作/video(1)/阿貝多.mp4';
videoSource.type = 'video/mp4';
videoPlayer.appendChild(videoSource);
videoContainer.appendChild(videoPlayer);
document.body.appendChild(videoContainer);
videoPlaying = true;
} else {
var videoContainer = document.querySelector('.video-container');
if (videoContainer) {
videoContainer.remove();
videoPlaying = false;
}
}
});
</script>首頁js代碼文章來源：http://www.zghlxwxcb.cn/news/detail-752348.html
$(function () {
var one = document.querySelector('.one')
var two = document.querySelector('.two')
var three = document.querySelector('.three')
var four = document.querySelector('.four')
var five = document.querySelector('.five')
two.addEventListener('click', function () {
this.src = 'upload/2.webp';
one.src = 'upload/1.webp';
three.src = './upload/3.webp';
four.src = './upload/4.webp';
five.src = './upload/5.webp';
})
one.addEventListener('click', function () {
this.src = 'upload/1.webp';
two.src = 'upload/2.webp';
three.src = './upload/3.webp';
four.src = './upload/4.webp';
five.src = './upload/5.webp';
})
three.addEventListener('click', function () {
this.src = './upload/3.webp';
two.src = 'upload/2.webp';
one.src = 'upload/1.webp';
four.src = './upload/4.webp';
five.src = './upload/5.webp';
})
four.addEventListener('click', function () {
this.src = './upload/4.webp';
two.src = 'upload/2.webp';
three.src = './upload/3.webp';
one.src = 'upload/1.webp';
five.src = './upload/5.webp';
})
// five.addEventListener('click', function () {
// this.src = '/upload/5.webp';
// two.src = 'upload/2.webp';
// three.src = './upload/3.webp';
// one.src = 'upload/1.webp';
// four.src = './upload/4.webp';
// })
$('.section3 li').click(function () {
var index = $(this).index();
$('.figure').eq(index).show().siblings('.figure').hide();
})
$('.link .one').hover(function () {
$(this)[0].src = 'images/微博9.webp';
}, function () {
$(this)[0].src = 'images/微博9.webp';
})
$('.link .two').hover(function () {
$(this)[0].src = 'images/微信5.webp';
}, function () {
$(this)[0].src = 'images/微信5.webp';
})
$('.link .three').hover(function () {
$(this)[0].src = 'images/嗶哩嗶哩1.webp';
}, function () {
$(this)[0].src = 'images/嗶哩嗶哩1.webp';
})
$('.link .four').hover(function () {
$(this)[0].src = 'images/社區(qū)q.webp';
}, function () {
$(this)[0].src = 'images/社區(qū)q.webp';
})
// jq 點擊按鈕顯示div,點擊頁面其他任何地方隱藏div
$(".section1 .play").on("click", function (e) {
$(".section1 .mask1").show();
$(".section1 .mask1 video")[0].load();
$('.section1').one("click", function () {
$(".section1 .mask1").hide();
$(".section1 .mask1 video")[0].pause();
});
e.stopPropagation();
});
$(".section1 .mask1 video").on("click", function (e) {
e.stopPropagation();
});
//
// 四個人物視頻
$(".section3 .figure1 .player").on("click", function (e) {
$(".section3 .mask-figure1").show();
$(".section3 .mask-figure1 video")[0].load();
$('.section3').one("click", function () {
$(".section3 .mask-figure1").hide();
$(".section3 .mask-figure1 video")[0].pause();
});
e.stopPropagation();
});
$(".section3 .mask-figure1 video").on("click", function (e) {
e.stopPropagation();
});
//
$(".section3 .figure2 .player").on("click", function (e) {
$(".section3 .mask-figure2").show();
$(".section3 .mask-figure2 video")[0].load();
$('.section3').one("click", function () {
$(".section3 .mask-figure2").hide();
$(".section3 .mask-figure2 video")[0].pause();
});
e.stopPropagation();
});
$(".section3 .mask-figure2 video").on("click", function (e) {
e.stopPropagation();
});
//
$(".section3 .figure3 .player").on("click", function (e) {
$(".section3 .mask-figure3").show();
$(".section3 .mask-figure3 video")[0].load();
$('.section3').one("click", function () {
$(".section3 .mask-figure3").hide();
$(".section3 .mask-figure3 video")[0].pause();
});
e.stopPropagation();
});
$(".section3 .mask-figure3 video").on("click", function (e) {
e.stopPropagation();
});
//
$(".section3 .figure4 .player").on("click", function (e) {
$(".section3 .mask-figure4").show();
$(".section3 .mask-figure4 video")[0].load();
$('.section3').one("click", function () {
$(".section3 .mask-figure4").hide();
$(".section3 .mask-figure4 video")[0].pause();
});
e.stopPropagation();
});
$(".section3 .mask-figure4 video").on("click", function (e) {
e.stopPropagation();
});
//
$(".section1 .age").on("click", function (e) {
$(".section1 .mask2").show();
$('.section1').one("click", function () {
$(".section1 .mask2").hide();
});
e.stopPropagation();
});
$(".section1 .mask2 .agetip").on("click", function (e) {
e.stopPropagation();
});
$(".section5 .two").on("click", function (e) {
$(".section5 .mask3").show();
$('.section5').one("click", function () {
$(".section5 .mask3").hide();
});
e.stopPropagation();
});
$(".section5 .mask3 .wechat3").on("click", function (e) {
e.stopPropagation();
});
})因為該項目比較大，內(nèi)容比較多，所以在這里只展示部分代碼，有需要的小伙伴可以私信我！??！文章來源地址http://www.zghlxwxcb.cn/news/detail-752348.html
到了這里，關(guān)于最詳細(xì)?。?！前端原神官網(wǎng) （采用html+css+js+dom+ajax+jquery+swiper+json）完整版的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
