caimei365-www/src/main/resources/static/js/encyclopedia/detail.js

"use strict";

function initPreviewImage() {
    var imageGroup = {};
    var imageEls = document.querySelectorAll('.content');
    if (imageEls.length <= 0) return;
    imageEls.forEach(function (imageEl, index) {
        imageGroup['cm-images-' + index] = new Viewer(imageEl);
    });
    console.log('初始化图片预览成功')
}

$(function () {
    // 页面滚动偏移
    var offset = 0;
    var windowWidth = $(window).width();
    var timer = null; // 定时器
    var middleScreenWidth = 1450;
    // 生成导航
    makeNavigate('.section .title h2', '.navigate');
    if (windowWidth > 768) {
        offset = getScrollOffset('.navbar') + 10;
    } else {
        offset = getScrollOffset(['.navbar', '.navigate']) + 10;
    }
    // 侧边导航跳转
    bindCategory('.navigate li', '.section', offset, function (index) {
        activeCategory('.navigate li', index);
    });
    // 页面滚动观测
    pageScrollObserve('.section', offset, function (el, index) {
        if (index > -1) {
            activeCategory('.navigate li', index);
        }
    });
    // 常见问题展开收起
    $('[data-toggle="collapse"]').each(function (index, el) {
        var targetEl = $(el).attr('data-target');
        if (!targetEl) return;
        $(targetEl).hide();
        $(el).on('click', function () {
            $(targetEl).toggle();
            $(el).toggleClass('arrowup');
        });
    });

    $('#contactPopupBtn').on('click', function () {
        $('#contactPopup').show();
    });
    $('#contactPopupClose').on('click', function () {
        $('#contactPopup').hide();
    });

    // 切换显示侧边导航
    function toggleNavigate(selector, time, maxWidth, offset) {
        selector = $(selector);
        if (windowWidth <= middleScreenWidth) {
            selector.hide();
        }
        // 鼠标移动事件
        $('body').on('mousemove', function (e) {
            var width = $(this).width();
            if (!(e.clientX > width - offset && width <= maxWidth)) return;
            clearTimeout(timer);
            selector.fadeIn();
            timer = setTimeout(function () {
                selector.fadeOut();
            }, time)
        });
        // 窗口大小改变
        $(window).resize(function () {
            if ($(this).width() <= maxWidth) {
                selector.hide();
            } else {
                selector.show();
            }
        });
    }
    initPreviewImage()
    // toggleNavigate('.navigate', 1000, middleScreenWidth, 80);

    // 视频播放
    $('.related-video .video-control .play').on('click', function(){
        var videoUrl = $(this).siblings('video').attr('src');
        $('#video-popup video').attr('src', videoUrl);
        $('#video-popup').show();
    })
    $('#video-popup .close').on('click', function(){
        $(this).parents('#video-popup').hide();
    });
});
//百科
var encyclopedia = new Vue({
    el: "#encyclopedia",
    mixins: [cmSysVitaMixins],
    data: {

    },
    methods: {},
    created: function () {
        // 行为轨迹统计
        this.cmSysParams.pageType = 12;
        this.cmSysParams.pageLabel =  $('#discription').text();
    },
    mounted: function () {

    }
});