https://wenjing233.github.io/js/matery.js

1$(function () {
2    /**
3     * 添加文章卡片hover效果.
4     */
5    let articleCardHover = function () {
6        let animateClass = 'animated pulse';
7        $('article .article').hover(function () {
8            $(this).addClass(animateClass);
9        }, function () {
10            $(this).removeClass(animateClass);
11        });
12    };
13    articleCardHover();
14
15    /*菜单切换*/
16    $('.button-collapse').sideNav();
17
18    /* 修复文章卡片 div 的宽度. */
19    let fixPostCardWidth = function (srcId, targetId) {
20        let srcDiv = $('#' + srcId);
21        if (srcDiv.length === 0) {
22            return;
23        }
24
25        let w = srcDiv.width();
26        if (w >= 450) {
27            w = w + 21;
28        } else if (w >= 350 && w < 450) {
29            w = w + 18;
30        } else if (w >= 300 && w < 350) {
31            w = w + 16;
32        } else {
33            w = w + 14;
34        }
35        $('#' + targetId).width(w);
36    };
37
38    /**
39     * 修复footer部分的位置，使得在内容比较少时，footer也会在底部.
40     */
41    let fixFooterPosition = function () {
42        $('.content').css('min-height', window.innerHeight - 165);
43    };
44
45    /**
46     * 修复样式.
47     */
48    let fixStyles = function () {
49        fixPostCardWidth('navContainer', 'articles');
50        fixPostCardWidth('artDetail', 'prenext-posts');
51        fixFooterPosition();
52    };
53    fixStyles();
54
55    /*调整屏幕宽度时重新设置文章列的宽度，修复小间距问题*/
56    $(window).resize(function () {
57        fixStyles();
58    });
59
60    /*初始化瀑布流布局*/
61    $('#articles').masonry({
62        itemSelector: '.article'
63    });
64
65    AOS.init({
66        easing: 'ease-in-out-sine',
67        duration: 700,
68        delay: 100
69    });
70
71    /*文章内容详情的一些初始化特性*/
72    let articleInit = function () {
73        $('#articleContent a').attr('target', '_blank');
74
75        $('#articleContent img').each(function () {
76            let imgPath = $(this).attr('src');
77            $(this).wrap('<div class="img-item" data-src="' + imgPath + '" data-sub-html=".caption"></div>');
78            // 图片添加阴影
79            $(this).addClass("img-shadow img-margin");
80            // 图片添加字幕
81            let alt = $(this).attr('alt');
82            let title = $(this).attr('title');
83            let captionText = "";
84            // 如果alt为空，title来替
85            if (alt === undefined || alt === "") {
86                if (title !== undefined && title !== "") {
87                    captionText = title;
88                }
89            } else {
90                captionText = alt;
91            }
92            // 字幕不空，添加之
93            if (captionText !== "") {
94                let captionDiv = document.createElement('div');
95                captionDiv.className = 'caption';
96                let captionEle = document.createElement('b');
97                captionEle.className = 'center-caption';
98                captionEle.innerText = captionText;
99                captionDiv.appendChild(captionEle);
100                this.insertAdjacentElement('afterend', captionDiv)
101            }
102        });
103        $('#articleContent, #myGallery').lightGallery({
104            selector: '.img-item',
105            // 启用字幕
106            subHtmlSelectorRelative: true
107        });
108
109        // progress bar init
110        const progressElement = window.document.querySelector('.progress-bar');
111        if (progressElement) {
112            new ScrollProgress((x, y) => {
113                progressElement.style.width = y * 100 + '%';
114            });
115        }
116    };
117    articleInit();
118
119    $('#toggleSearch').click(function () {
120        $('#searchModal').openModal();
121    });
122
123    /*回到顶部*/
124    $('#backTop').click(function () {
125        $('body,html').animate({scrollTop: 0}, 400);
126        return false;
127    });
128
129    /*监听滚动条位置*/
130    let $nav = $('#headNav');
131    let $backTop = $('.top-scroll');
132    $(window).scroll(function () {
133        /* 回到顶部按钮根据滚动条的位置的显示和隐藏.*/
134        let scroll = $(window).scrollTop();
135        if (scroll < 100) {
136            $nav.addClass('nav-transparent');
137            $backTop.slideUp(300);
138        } else {
139            $nav.removeClass('nav-transparent');
140            $backTop.slideDown(300);
141        }
142    });
143});