https://cikian.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    $('.sidenav').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');
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    $('.modal').modal();
120
121    /*回到顶部*/
122    $('#backTop').click(function () {
123        $('body,html').animate({scrollTop: 0}, 400);
124        return false;
125    });
126
127    /*监听滚动条位置*/
128    let $nav = $('#headNav');
129    let $backTop = $('.top-scroll');
130    // 当页面处于文章中部的时候刷新页面，因为此时无滚动，所以需要判断位置,给导航加上绿色。
131    showOrHideNavBg($(window).scrollTop());
132    $(window).scroll(function () {
133        /* 回到顶部按钮根据滚动条的位置的显示和隐藏.*/
134        let scroll = $(window).scrollTop();
135        showOrHideNavBg(scroll);
136    });
137
138    function showOrHideNavBg(position) {
139        let showPosition = 100;
140        if (position < showPosition) {
141            $nav.addClass('nav-transparent');
142            $backTop.slideUp(300);
143        } else {
144            $nav.removeClass('nav-transparent');
145            $backTop.slideDown(300);
146        }
147    }
148
149    	
150	$(".nav-menu>li").hover(function(){
151		$(this).children('ul').stop(true,true).show();
152		 $(this).addClass('nav-show').siblings('li').removeClass('nav-show');
153		
154	},function(){
155		$(this).children('ul').stop(true,true).hide();
156		$('.nav-item.nav-show').removeClass('nav-show');
157	})
158	
159    $('.m-nav-item>a').on('click',function(){
160            if ($(this).next('ul').css('display') == "none") {
161                $('.m-nav-item').children('ul').slideUp(300);
162                $(this).next('ul').slideDown(100);
163                $(this).parent('li').addClass('m-nav-show').siblings('li').removeClass('m-nav-show');
164            }else{
165                $(this).next('ul').slideUp(100);
166                $('.m-nav-item.m-nav-show').removeClass('m-nav-show');
167            }
168    });
169
170    // 初始化加载 tooltipped.
171    $('.tooltipped').tooltip();
172});