You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

194 lines
5.9 KiB

3 years ago
$(function () {
/**
* 添加文章卡片hover效果.
*/
let articleCardHover = function () {
let animateClass = 'animated pulse';
$('article .article').hover(function () {
$(this).addClass(animateClass);
}, function () {
$(this).removeClass(animateClass);
});
};
articleCardHover();
/*菜单切换*/
$('.sidenav').sidenav();
/* 修复文章卡片 div 的宽度. */
let fixPostCardWidth = function (srcId, targetId) {
let srcDiv = $('#' + srcId);
if (srcDiv.length === 0) {
return;
}
let w = srcDiv.width();
if (w >= 450) {
w = w + 21;
} else if (w >= 350 && w < 450) {
w = w + 18;
} else if (w >= 300 && w < 350) {
w = w + 16;
} else {
w = w + 14;
}
$('#' + targetId).width(w);
};
/**
* 修复footer部分的位置使得在内容比较少时footer也会在底部.
*/
let fixFooterPosition = function () {
$('.content').css('min-height', window.innerHeight - 165);
};
/**
* 修复样式.
*/
let fixStyles = function () {
fixPostCardWidth('navContainer');
fixPostCardWidth('artDetail', 'prenext-posts');
fixFooterPosition();
};
fixStyles();
/*调整屏幕宽度时重新设置文章列的宽度,修复小间距问题*/
$(window).resize(function () {
fixStyles();
});
/*初始化瀑布流布局*/
$('#articles').masonry({
itemSelector: '.article'
});
AOS.init({
easing: 'ease-in-out-sine',
duration: 700,
delay: 100
});
/*文章内容详情的一些初始化特性*/
let articleInit = function () {
$('#articleContent a').attr('target', '_blank');
$('#articleContent img').each(function () {
let imgPath = $(this).attr('src');
$(this).wrap('<div class="img-item" data-src="' + imgPath + '" data-sub-html=".caption"></div>');
// 图片添加阴影
$(this).addClass("img-shadow img-margin");
// 图片添加字幕
let alt = $(this).attr('alt');
let title = $(this).attr('title');
let captionText = "";
// 如果alt为空,title来替
if (alt === undefined || alt === "") {
if (title !== undefined && title !== "") {
captionText = title;
}
} else {
captionText = alt;
}
// 字幕不空,添加之
if (captionText !== "") {
let captionDiv = document.createElement('div');
captionDiv.className = 'caption';
let captionEle = document.createElement('b');
captionEle.className = 'center-caption';
captionEle.innerText = captionText;
captionDiv.appendChild(captionEle);
this.insertAdjacentElement('afterend', captionDiv)
}
});
$('#articleContent, #myGallery').lightGallery({
selector: '.img-item',
// 启用字幕
subHtmlSelectorRelative: true
});
$(document).find('img[data-original]').each(function(){
$(this).parent().attr("href", $(this).attr("data-original"));
});
// progress bar init
const progressElement = window.document.querySelector('.progress-bar');
if (progressElement) {
new ScrollProgress((x, y) => {
progressElement.style.width = y * 100 + '%';
});
}
};
articleInit();
$('.modal').modal();
/*回到顶部*/
$('#backTop').click(function () {
$('body,html').animate({scrollTop: 0}, 400);
return false;
});
/*监听滚动条位置*/
let $nav = $('#headNav');
let $backTop = $('.top-scroll');
// 当页面处于文章中部的时候刷新页面,因为此时无滚动,所以需要判断位置,给导航加上绿色。
showOrHideNavBg($(window).scrollTop());
$(window).scroll(function () {
/* 回到顶部按钮根据滚动条的位置的显示和隐藏.*/
let scroll = $(window).scrollTop();
showOrHideNavBg(scroll);
});
function showOrHideNavBg(position) {
let showPosition = 100;
if (position < showPosition) {
$nav.addClass('nav-transparent');
$backTop.slideUp(300);
} else {
$nav.removeClass('nav-transparent');
$backTop.slideDown(300);
}
}
$(".nav-menu>li").hover(function(){
$(this).children('ul').stop(true,true).show();
$(this).addClass('nav-show').siblings('li').removeClass('nav-show');
},function(){
$(this).children('ul').stop(true,true).hide();
$('.nav-item.nav-show').removeClass('nav-show');
})
$('.m-nav-item>a').on('click',function(){
if ($(this).next('ul').css('display') == "none") {
$('.m-nav-item').children('ul').slideUp(300);
$(this).next('ul').slideDown(100);
$(this).parent('li').addClass('m-nav-show').siblings('li').removeClass('m-nav-show');
}else{
$(this).next('ul').slideUp(100);
$('.m-nav-item.m-nav-show').removeClass('m-nav-show');
}
});
// 初始化加载 tooltipped.
$('.tooltipped').tooltip();
});
// 深色模式设置
function switchNightMode() {
var body = document.body;
if(body.classList.contains('dark')){
document.body.classList.remove('dark');
localStorage.setItem('dark','0');
$('#nightMode').removeClass("fa-lightbulb").addClass("fa-lightbulb");
return;
} else {
document.body.classList.add('dark');
localStorage.setItem('dark','1');
$('#nightMode').removeClass("fa-lightbulb").addClass("fa-lightbulb");
return;
}
}