26423f7d3b
- 引入CSS变量系统，定义完整的色彩和样式变量 - 应用radial-gradient和linear-gradient创建动态背景效果 - 实现backdrop-filter毛玻璃效果，增强视觉层次感 - 添加悬停交互反馈和过渡动画 - 统一文字颜色和背景透明度处理 - 优化移动端显示效果和响应式设计 - 增强阴影效果和边框样式一致性 - 添加orbit轨道动画和相位控制 - 改进渐变色应用和文本填充效果 - 优化技术栈标签云的视觉表现
93 lines
2.4 KiB
JavaScript
93 lines
2.4 KiB
JavaScript
var iUp = (function () {
|
|
var t = 0,
|
|
d = 150,
|
|
clean = function () {
|
|
t = 0;
|
|
},
|
|
up = function (e) {
|
|
setTimeout(function () {
|
|
$(e).addClass("up")
|
|
}, t);
|
|
t += d;
|
|
},
|
|
down = function (e) {
|
|
$(e).removeClass("up");
|
|
},
|
|
toggle = function (e) {
|
|
setTimeout(function () {
|
|
$(e).toggleClass("up")
|
|
}, t);
|
|
t += d;
|
|
};
|
|
return {
|
|
clean: clean,
|
|
up: up,
|
|
down: down,
|
|
toggle: toggle
|
|
}
|
|
})();
|
|
|
|
$(document).ready(function () {
|
|
|
|
// 获取一言数据
|
|
fetch('https://v1.hitokoto.cn?c=c&c=d&c=i&c=k').then(function (res) {
|
|
return res.json();
|
|
}).then(function (e) {
|
|
$('#description').html(e.hitokoto + "<br/> -「<strong>" + e.from + "</strong>」")
|
|
}).catch(function (err) {
|
|
console.error("获取一言数据失败", err);
|
|
})
|
|
|
|
/**
|
|
* 自定义壁纸
|
|
*/
|
|
var imgUrls = JSON.parse(sessionStorage.getItem("imgUrls"));
|
|
var index = sessionStorage.getItem("index");
|
|
var $panel = $('#panel');
|
|
var date = new Date();
|
|
var dayOfWeek = date.getDay();
|
|
if (imgUrls == null) {
|
|
imgUrls = [];
|
|
index = 0;
|
|
for (let i = 1; i < 8; i++) {
|
|
imgUrls.push("/images/bj/"+i+".jpg");
|
|
}
|
|
sessionStorage.setItem("imgUrls", JSON.stringify(imgUrls));
|
|
// sessionStorage.setItem("index", index);
|
|
} else {
|
|
// if (index == imgUrls.length)
|
|
// index = 0;
|
|
// else
|
|
// index++;
|
|
// sessionStorage.setItem("index", index);
|
|
}
|
|
|
|
var imgUrl = imgUrls[dayOfWeek];
|
|
$panel.css("background", "url('" + imgUrl + "') center center no-repeat #666");
|
|
$panel.css("background-size", "cover");
|
|
|
|
$(".iUp").each(function (i, e) {
|
|
iUp.up(e);
|
|
});
|
|
|
|
$(".js-avatar")[0].onload = function () {
|
|
$(".js-avatar").addClass("show");
|
|
}
|
|
});
|
|
|
|
$('.btn-mobile-menu__icon').click(function () {
|
|
if ($('.navigation-wrapper').css('display') == "block") {
|
|
$('.navigation-wrapper').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
|
|
$('.navigation-wrapper').toggleClass('visible animated bounceOutUp');
|
|
$('.navigation-wrapper').off('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend');
|
|
});
|
|
$('.navigation-wrapper').toggleClass('animated bounceInDown animated bounceOutUp');
|
|
|
|
} else {
|
|
$('.navigation-wrapper').toggleClass('visible animated bounceInDown');
|
|
}
|
|
$('.btn-mobile-menu__icon').toggleClass('social iconfont icon-list social iconfont icon-ngleup animated fadeIn');
|
|
});
|
|
|
|
|