作者：SocialdeSimonX
SocialdeSimonX
covers
内容简介：封面瞎找的
2023/04/22 13:38

三体官网源码

<!-- 首页 --> <!DOCTYPE html> <html lang="en">

<head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,minimum-scale=0.1,maximum-scale=1.0"/> <meta name="keywords" content="三体电视剧,三体美剧,三体电影,三体动画,三体广播剧,三体舞台剧,三体插画集,三体展"> <meta name="description" content="三体影视听动漫和线下体验作品的官方资讯"> <title>三体文化馆</title> <script src="https://www.3body.com/static/utils/jquery/jquery.min.js"></script> <script src="https://www.3body.com/static/utils/rem.js"></script> <link rel="icon" href="https://www.3body.com/favicon.ico"> <link rel="stylesheet" href="https://www.3body.com/static/styles/bootstrap/bootstrap.min.css" type="text/css" /> <link rel="stylesheet" href="https://www.3body.com/static/styles/index.css" type="text/css"/> <link rel="stylesheet" href="https://www.3body.com/static/styles/swiper/swiper.min.css" type="text/css"/> <link rel="stylesheet" href="https://www.3body.com/static/styles/pages/culture/culture.css" type="text/css"/> <body class="container"> <div class="main">

<div class="layout" onclick="onVagueClick()"> <div class="culture_left"> <div class="culture_left_nav"> <div class="st_logo"> <img class="st_logo_img" src="https://www.3body.com/static/image/public/st_logo.png" onclick="gotoPage('home')" alt="" title="三体宇宙" /> </div> <div class="culture_left_title">三体文化馆</div> <!-- 左侧小标题列表 --> <div class="culture_left_lists"> <div class="culture_left_list culture_left_list_79" id="79" onclick="onListClick(79)">中文剧集</div> <div class="culture_left_list culture_left_list_150" id="150" onclick="onListClick(150)">国创动画</div> <div class="culture_left_list culture_left_list_168" id="168" onclick="onListClick(168)">同人动画</div> <div class="culture_left_list culture_left_list_80" id="80" onclick="onListClick(80)">国际剧集</div> <div class="culture_left_list culture_left_list_185" id="185" onclick="onListClick(185)">世界观</div> <div class="culture_left_list culture_left_list_176" id="176" onclick="onListClick(176)">插画集</div> <div class="culture_left_list culture_left_list_183" id="183" onclick="onListClick(183)">人文综艺</div> <div class="culture_left_list culture_left_list_106" id="106" onclick="onListClick(106)">广播剧</div> <div class="culture_left_list culture_left_list_169" id="169" onclick="onListClick(169)">有声小说</div> <div class="culture_left_list culture_left_list_184" id="184" onclick="onListClick(184)">互动娱乐</div> <div class="culture_left_list culture_left_list_186" id="186" onclick="onListClick(186)">沉浸式体验</div> <div class="culture_left_list culture_left_list_177" id="177" onclick="onListClick(177)">展览</div> <div class="culture_left_list culture_left_list_178" id="178" onclick="onListClick(178)">舞台剧</div> </div> </div> <div class="culture_left_info"> <div class="culture_left_info_title"> <img class="culture_left_info_title_icon" src="https://www.3body.com/static/image/life/icon_circle.png" alt=""> <div class="culture_left_info_title_text"></div> </div> <div class="culture_left_info_introduce"> <div class="culture_left_info_introduce_title"></div> <!-- 介绍内容 --> <div class="culture_left_info_introduce_content"> </div> </div> <div class="culture_left_info_detail_logo_type"> <img class="culture_left_info_detail_logo_type_image" src="" onclick="onLogoTypeClick()" alt=""> <div class="culture_left_info_detail_logo_type_on_line" onclick="onLogoTypeClick()"></div> </div> <div class="culture_left_info_detail" onclick="onDetailClick()"> <img class="culture_detail_to_icon" src="https://www.3body.com/static/image/life/icon_to_detail.png" alt=""> </div> </div> </div> <div class="culture_swiper culture_swiper_hide"> <div class="swiper-container swiper-no-swiping" onclick="onStopClick(event)"> <!-- 轮播内容 --> <div class="swiper-wrapper"></div> <!-- 如果需要导航按钮 --> <div class="culture-st-prev"> <img class="swiper-st-button-icon swiper-st-button-icon-prev" src="https://www.3body.com/static/image/culture/arrow_prev.png" alt="" onclick="onRotationClick()" /> </div> <div class="culture-st-next"> <img class="swiper-st-button-icon swiper-st-button-icon-next" src="https://www.3body.com/static/image/culture/arrow_next.png" alt="" onclick="onRotationClick()" /> <img class="swiper-st-button-enlarge" src="https://www.3body.com/static/image/culture/icon_enlarge.png" alt="" onclick="onEnlargeClick()" /> <img class="swiper-st-button-close" src="https://www.3body.com/static/image/culture/icon_close.png" onclick="closeSwiper()" alt="" /> <img class="swiper-st-button-narrow swiper-st-button-icon-hide" src="https://www.3body.com/static/image/culture/icon_narrow.png" onclick="onEnlargeClick()" alt=""> </div> </div> </div> <div class="culture_rigth"> <div class="rigth_outter"> <div class="rigth_icon"> <img class="rigth_icon_caidan" onclick="onRigthNavList('caidan')" src="https://www.3body.com/static/image/public/icon_caidan.png" alt=""> <img class="rigth_icon_close rigth_icon_hide" onclick="onRigthNavList('close')" src="https://www.3body.com/static/image/public/icon_close.png" alt=""> </div> <div class="rigth_goback" onclick="onBackClick()"> <div>返航</div> <img class="rigth_goback_icon" src="https://www.3body.com/static/image/public/arrow_prev.png" alt=""> </div> <div class="rigth_nav rigth_nav_hide"> <div class="rigth_nav_list rigth_list_active" onclick="gotoPage('culture')">文化馆</div> <div class="rigth_nav_list " onclick="gotoPage('life')">生活馆</div> <div class="rigth_nav_list " onclick="gotoPage('archive')">档案馆</div> <div class="rigth_nav_list" onclick="gotoPage('news')">新闻</div> <div class="rigth_nav_list" onclick="gotoPage('community')">社群</div> <div class="rigth_nav_list" onclick="gotoPage('about')">关于</div> </div> </div> </div> </div> <!-- 背景模糊化 --> <div class="layout_bg"></div> </div> <div class="layout_online layout_online_hide"> <div class="layout_online_close" onclick="onCloseVagueClick()"> <img class="layout_online_close_image" src="https://www.3body.com/static/image/culture/icon_close.png" alt="" /> </div> <div class="layout_online_circular"> <img class="layout_online_circular_image" src="https://www.3body.com/static/image/culture/icon_online.png" alt="" /> </div> </div>

</div>

<script src="https://www.3body.com/static/utils/jquery/jquery.scrollToTop.min.js"></script> <script src="https://www.3body.com/static/utils/jquery/dialog.js"></script> <script src="https://www.3body.com/static/utils/swiper/swiper.min.js"></script>

<script type="text/javascript">

let pageData = [];

$(function () {
    $.ajax({
        url: "https://www.3body.com/front/culture/getCulturalInfo?cultureId=150",
        type: "get",
        success: function (data) {
            pageData = data.result.culturalInfo;
            let isFirstActive = data.result.isFirstActive;
            renderPage(pageData, isFirstActive);
        }
    })
})

let isEnlarge = true; // 是否扩大
let currentVideoId = null; // 当前播放视频id
let isCurrentPlay = false; // 当前是否有视频播放
let currentHierarchy = 0; // 页面当前层级
let isDefaultPage = true; // 是否是默认进入

// 渲染轮播
function renderSwiperSlide(data) {
    if (data.length <= 0) {
        $('.culture_left_info_detail').addClass('culture_left_info_detail_hide');
        return;
    }
    $('.culture_left_info_detail').removeClass('culture_left_info_detail_hide');

    let swiperSlideContent = ``;
    for (let i = 0; i < data.length; i++) {
        if (data[i].type === 'video') {
            swiperSlideContent += `
        <div class="swiper-slide">
          <video
            class="swiper-slide-video video-id-` + data[i].id + `"
            src="` + data[i].src + `"
            poster="` + data[i].videoCoverUrl + `"
            onpause='handlePause(` + data[i].id + `)'
            onplay='handlePlay(` + data[i].id + `)'
            onclick='onVideoClick(` + data[i].id + `)'
          >
            <source src="1.mp4"/>
            <source src="1.ogg"/>
            <source src="1.webm"/>
            抱歉!您的浏览器不支持视频标签
          </video>
          <div class="culture-video culture-video-` + data[i].id + `" onclick="onPlayPause(` + data[i].id + `)">
            <img class='culture-video-triangle' src="https://www.3body.com/static/image/culture/icon_triangle.png" alt="">
          </div>
        </div>
      `;
        } else {
            swiperSlideContent += `
      <div class="swiper-slide">
        <img class="swiper-slide-video" src="` + data[i].src + `" alt="">
      </div>
      `;
        }
        ;
        $(".swiper-wrapper").html(swiperSlideContent);
    }
}

function renderPage(pageData, isFirstActive) {
    let leftList = '';
    for (let i = 0; i < pageData.length; i++) {
        if (isFirstActive == 0) {
            if (pageData[i].active === 1) {
                leftList += `
                  <div
                    class="culture_left_list culture_left_list_` + pageData[i].id + ` culture_left_list_active"
                    id="` + pageData[i].id + `"
                    onclick="onListClick(` + pageData[i].id + `)"
                  >
                    ` + pageData[i].title + `
                  </div>
                `;
                $('.culture_left_info_title_text').html(pageData[i].info.title);
                $('.culture_left_info_introduce_content').html(pageData[i].info.introduce);
                $(".layout_bg").css({"background-image": `url(` + pageData[i].bg + `)`});
                $('.culture_left_info_detail_logo_type_image').attr({src: pageData[i].thirdParty.logo, link: pageData[i].thirdParty.url});
                if (!pageData[i].thirdParty.logo) {
                    $('.culture_left_info_detail_logo_type_on_line').html('即将上线');
                }
                $(".layout_bg").css({"background-image": `url(` + pageData[i].bg + `)`});
                renderSwiperSlide(pageData[i].swiperWrapperData);
            } else {
                leftList += `
                  <div
                    class="culture_left_list culture_left_list_` + pageData[i].id + `"
                    id="` + pageData[i].id + `"
                    onclick="onListClick(` + pageData[i].id + `)"
                  >
                    ` + pageData[i].title + `
                  </div>
                `;
            }
        } else {
            if (i === 0) {
                leftList += `
                  <div
                    class="culture_left_list culture_left_list_` + pageData[i].id + ` culture_left_list_active"
                    id="` + pageData[i].id + `"
                    onclick="onListClick(` + pageData[i].id + `)"
                  >
                    ` + pageData[i].title + `
                  </div>
                `;
                $('.culture_left_info_title_text').html(pageData[i].info.title);
                $('.culture_left_info_introduce_content').html(pageData[i].info.introduce);
                $('.culture_left_info_detail_logo_type_image').attr({src: pageData[i].thirdParty.logo, link: pageData[i].thirdParty.url});
                if (!pageData[i].thirdParty.logo) {
                    $('.culture_left_info_detail_logo_type_on_line').html('即将上线');
                }
                $(".layout_bg").css({"background-image": `url(` + pageData[i].bg + `)`});
                renderSwiperSlide(pageData[i].swiperWrapperData);
            } else {
                leftList += `
                  <div
                    class="culture_left_list culture_left_list_` + pageData[i].id + `"
                    id="` + pageData[i].id + `"
                    onclick="onListClick(` + pageData[i].id + `)"
                  >
                    ` + pageData[i].title + `
                  </div>
                `;
            }
        }
    }
    // $(".culture_left_lists").html(leftList);
}

$(".culture_left_list").hover(function () {
});

let mySwiper = null;
setTimeout(() => {
    mySwiper = new Swiper('.swiper-container', {
        // direction: 'vertical', // 垂直切换选项
        loop: false, // 循环模式选项
        observer: true,
        observeParents: true,

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-st-button-icon-next',
            prevEl: '.swiper-st-button-icon-prev',
        },
    })
}, 1000);

// 播放视频
function onPlayPause(data) {
    currentVideoId = data;
    const videoId = '.video-id-' + data;
    const palyIcon = '.culture-video-' + data;
    const palyVideo = document.querySelector(videoId);
    if (palyVideo.paused) {
        palyVideo.play();
        $(palyIcon).addClass('culture-video-hide');
        isCurrentPlay = true;
    } else {
        palyVideo.pause();
        $(palyIcon).removeClass('culture-video-hide');
        isCurrentPlay = false;
        console.log(isCurrentPlay)
    }
};

// 轮播左右切换
function onRotationClick() {
    if (isCurrentPlay && currentVideoId) {
        onPlayPause(currentVideoId);
    }
    ;
    swiperBottonStatus();
}

// 判断轮播按钮是否禁用
function swiperBottonStatus() {
    setTimeout(() => {
        const prev = $('.swiper-slide-prev').length;
        const next = $('.swiper-slide-next').length;
        if (next === 0) {
            $('.swiper-st-button-icon-next').css({'cursor': 'no-drop'});
        } else {
            $('.swiper-st-button-icon-next').css({'cursor': 'pointer'});
        }
        if (prev === 0) {
            $('.swiper-st-button-icon-prev').css({'cursor': 'no-drop'});
        } else {
            $('.swiper-st-button-icon-prev').css({'cursor': 'pointer'});
        }
    }, 1000)
}

// 视频暂停时触发
function handlePause(data) {
    isCurrentPlay = false;
    const palyIcon = '.culture-video-' + data;
    $(palyIcon).removeClass('culture-video-hide');
}

// 视频播放时触发
function handlePlay(data) {
    const palyIcon = '.culture-video-' + data;
    $(palyIcon).addClass('culture-video-hide');
}

// 点击视频
function onVideoClick(data) {
    onPlayPause(data);
}

// 点击详情
function onDetailClick() {
    currentHierarchy = 1;
    $('.culture_swiper').css({'top': '0'});
    $('.culture_swiper').removeClass('culture_swiper_hide');
    swiperBottonStatus();
};

// 关闭轮播
function closeSwiper() {
    if (!isEnlarge) {
        onEnlargeClick();
    }
    $('.culture_swiper').css({'top': '-15rem'});
    $('.culture_swiper').addClass('culture_swiper_hide');
    $('.layout_bg').removeClass('layout_bg_vague');
    $('.culture_left_info').removeClass('culture_left_info_hide');
    if (isCurrentPlay && currentVideoId) {
        onPlayPause(currentVideoId);
    }
}

// 轮播放大
function onEnlargeClick() {
    if (isEnlarge) {
        $('.culture_left_info').addClass('culture_left_info_hide');
        $('.swiper-container').addClass('swiper-container-enlarge');
        $('.layout_bg').addClass('layout_bg_vague');
        $('.swiper-st-button-enlarge').addClass('swiper-st-button-icon-hide');
        $('.swiper-st-button-narrow').removeClass('swiper-st-button-icon-hide');
        // updataSwiperSlide();
        isEnlarge = false;
        currentHierarchy = 2;
    } else {
        $('.culture_left_info').removeClass('culture_left_info_hide');
        $('.swiper-container').removeClass('swiper-container-enlarge');
        $('.layout_bg').removeClass('layout_bg_vague');
        $('.swiper-st-button-enlarge').removeClass('swiper-st-button-icon-hide');
        $('.swiper-st-button-narrow').addClass('swiper-st-button-icon-hide');
        isEnlarge = true;
        currentHierarchy = 1;
    }
}

function updataSwiperSlide() {
    $(".swiper-wrapper").html('');
    addSwiperSlide(pageData);
}

// 切换左侧列表内容
function onListClick(id) {
    $.post("https://www.3body.com/front/statistics/categoryclickLog?categoryId=" + id)
    window.location.href = "https://www.3body.com/front/culture/"+id+".html";
    return;
    if (!isEnlarge) {
        onEnlargeClick();
    };
    $('.culture_swiper').addClass('culture_swiper_hide');
    $(`.culture_left_list_active`).removeClass('culture_left_list_active');
    const lists = $('.culture_left_list');
    for (let i = 0; i < lists.length; i++) {
        if (Number(lists[i].id) === data) {
            $(`.culture_left_list_`+data).addClass('culture_left_list_active');
        }
    }
    $('.culture_swiper').css({'top': '-15rem'});
    updataInfoData(data);
    mySwiper.slideTo(0);
}


// 更新页面信息
function updataInfoData(data) {
    $(".swiper-wrapper").html('');
    $('.culture_left_info_title_text').html('');
    $('.culture_left_info_introduce_content').html('');
    $('.culture_left_info_detail_logo_type_on_line').html('');
    for (let i = 0; i < pageData.length; i++) {
        if (pageData[i].id === data) {
            $('.culture_left_info_title_text').html(pageData[i].info.title);
            $('.culture_left_info_introduce_content').html(pageData[i].info.introduce);
            $('.culture_left_info_detail_logo_type_image').attr({src: pageData[i].thirdParty.logo, link: pageData[i].thirdParty.url});
            $(".layout_bg").css({"background-image": `url(` + pageData[i].bg + `)`});
            if (!pageData[i].thirdParty.logo) {
                $('.culture_left_info_detail_logo_type_on_line').html('即将上线');
            }
            renderSwiperSlide(pageData[i].swiperWrapperData);
        }
    }
}

// 点击返航
function onBackClick() {
    if (currentHierarchy === 0) {
        // window.history.back();
        if (isDefaultPage) {
            window.location.href = "https://www.3body.com";
        } else{
            window.location.href = "https://www.3body.com/front/culture/culture.html";
        };
        return;
    }
    if (currentHierarchy === 1) {
        currentHierarchy = 0;
        $('.culture_swiper').css({'top': '-15rem'});
        $('.culture_swiper').addClass('culture_swiper_hide');
        return;
    }
    if (currentHierarchy === 2) {
        currentHierarchy = 1;
        onEnlargeClick();
        return;
    }

}

// 右侧导航
function gotoPage(value) {
    if (value === 'home') {
        window.location.href = "https://www.3body.com";
    }
    if (value === 'culture') {
        window.location.href = "https://www.3body.com/front/culture/culture.html";
    }
    ;
    if (value === 'life') {
        window.location.href = "https://www.3body.com/front/life/life.html";
    }
    ;
    if (value === 'archive') {
        window.location.href = "https://www.3body.com/front/archive/archive.html";
    }
    ;
    if (value === 'news') {
        window.location.href = "https://www.3body.com/front/news/news.html";
    }
    ;
    if (value === 'community') {
        window.location.href = "https://www.3body.com/front/community/community.html";
    }
    ;
    if (value === 'about') {
        window.location.href = "https://www.3body.com/front/about/about.html";
    }
    ;
}

function onRigthNavList(value) {
    if (value === 'close') {
        navclose();
    }
    if (value === 'caidan') {
        navShow();
    }
}

// 隐藏右侧导航
function navclose() {
    console.log('隐藏导航')
    $(`.rigth_icon_close`).addClass('rigth_icon_hide');
    $(`.rigth_icon_caidan`).removeClass('rigth_icon_hide');
    $(`.rigth_nav`).removeClass('rigth_animation_show');
    $(`.rigth_nav`).addClass('rigth_animation_hide rigth_nav_hide');
}

// 显示右侧导航
function navShow() {
    console.log('显示导航')
    $(`.rigth_icon_close`).removeClass('rigth_icon_hide');
    $(`.rigth_icon_caidan`).addClass('rigth_icon_hide');
    $(`.rigth_nav`).removeClass('rigth_animation_hide rigth_nav_hide');
    $(`.rigth_nav`).addClass('rigth_animation_show');
}

function onLogoTypeClick() {
    const url = $('.culture_left_info_detail_logo_type_image').attr('link');
    if (url) {
        window.open(url);
    } else {
        $(`.main`).addClass('main_vague');
        $(`.layout_online`).removeClass('layout_online_hide');
    }
}

function onCloseVagueClick() {
    $(`.layout_online`).addClass('layout_online_hide');
    $(`.main`).removeClass('main_vague');
}

function onStopClick(event) {
    event.stopPropagation();
}
function onVagueClick() {
    if (!isEnlarge) {
        currentHierarchy = 1;
        onEnlargeClick();
    }
}

//页面加载完毕后执行
window.onload=function() {
    let url = window.location.href;
    let urlArr = url.split('/');
    let urlId = urlArr.pop();
    isDefaultPage = urlId === 'culture.html';
    if (urlId === 'culture.html') {
        $(".culture_left_lists").find('div').first().addClass('culture_left_list_active');
    } else {
        let id = urlId.split('.')[0];
        $('.culture_left_list_' + id).addClass('culture_left_list_active');
    }
}

</script> </body>

</html>

评论区

登录之后才能评论Scratch作品哦
CaryLL10 个月前

em ，这只是一个HTML的离线页面代码而已，没什么大惊小怪的