效果美化及若干效果bug修复

This commit is contained in:
结发受长生 2019-08-25 14:22:31 +08:00
parent 66a69b1100
commit eb5625c3ae
11 changed files with 43 additions and 67 deletions

View File

@ -1,5 +1,4 @@
<% var defaultBg = '#4d4d4d'; %> <% var defaultBg = '#4d4d4d'; %>
<div class="overlay" ></div>
<div class="intrude-less"> <div class="intrude-less">
<header id="header" class="inner"> <header id="header" class="inner">
<a href="<%=config.root%>" @mouseover="linkMouseover('home')" class="profilepic"> <a href="<%=config.root%>" @mouseover="linkMouseover('home')" class="profilepic">

View File

@ -1,3 +1,4 @@
<div class="article-outer">
<article class="article"> <article class="article">
<h3 class="category-count">共计 <%= site.categories.length %> 个分类, <%= site.tags.length %> 个标签</h3> <h3 class="category-count">共计 <%= site.categories.length %> 个分类, <%= site.tags.length %> 个标签</h3>
<% if (site.categories.length){ %> <% if (site.categories.length){ %>
@ -21,4 +22,5 @@
amount: 999 amount: 999
}) %> }) %>
</div> </div>
</article> </article>
</div>

View File

@ -27,10 +27,13 @@ html, body, #container {
.anm-canvas { .anm-canvas {
display: none; display: none;
} }
&.show .anm-canvas { &.show {
display: block; overflow-y: hidden;
position: fixed; .anm-canvas {
} display: block;
position: fixed;
}
}
} }
.body-wrap{ .body-wrap{
padding-top: 30px; padding-top: 30px;

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

View File

@ -1,21 +1,13 @@
.left-col { .left-col {
background: $colorBg; background: $colorBg url(./img/left_bg.jpg) no-repeat;
background-size: cover;
width: 300px; width: 300px;
position:fixed; position:fixed;
opacity:1; opacity:1;
@extend %trans; @extend %trans;
height:100%; height:100%;
z-index: 999; z-index: 999;
&.show { @extend %shadow;
@extend %shadow;
}
.overlay{
width: 100%;
height: 130px;
position: absolute;
background: #4d4d4d;
@extend %trans;
}
.intrude-less { .intrude-less {
width: 76%; width: 76%;

View File

@ -105,9 +105,6 @@ body.night {
display: none; display: none;
} }
} }
.overlay {
background: none;
}
// 头像 看板娘 图标 -> 降低亮度滤镜 // 头像 看板娘 图标 -> 降低亮度滤镜
.profilepic, .waifu, #header .header-nav .social a { .profilepic, .waifu, #header .header-nav .social a {
filter: brightness(30%); filter: brightness(30%);

View File

@ -1,13 +1,12 @@
var backTop = function (domE, ctn, distance) { var backTop = function (domE, ctn, distance) {
if (!domE) return if (!domE) return
var timer = null ctn.addEventListener('scroll', function(){
var _onscroll = ctn.onscroll // 滚动到一定高度才显示"回到顶部"按钮
ctn.onscroll = throttle(function () { // 滚动到一定高度才显示"回到顶部"按钮 throttle(toggleDomE, 200)(domE, ctn, distance)
typeof _onscroll === 'function' && _onscroll.apply(this, arguments) })
toggleDomE()
}, 100)
if(!window.getComputedStyle || window.getComputedStyle(ctn).scrollBehavior === undefined) { if(!window.getComputedStyle || window.getComputedStyle(ctn).scrollBehavior === undefined) {
// 浏览器不支持scroll-behavior属性 // 浏览器不支持scroll-behavior属性
let timer = null
domE.querySelector('a[href="#top"]').addEventListener('click', function (event) { domE.querySelector('a[href="#top"]').addEventListener('click', function (event) {
event.preventDefault() event.preventDefault()
timer = setInterval(function () { //设置一个计时器 timer = setInterval(function () { //设置一个计时器
@ -26,16 +25,15 @@ var backTop = function (domE, ctn, distance) {
}) })
} }
function toggleDomE() { function toggleDomE(targetDom, containerDom, distance) {
domE.style.display = (ctn.scrollTop || document.documentElement.scrollTop || document.body.scrollTop) > distance ? 'block' : 'none' targetDom.style.display = (containerDom.scrollTop || document.documentElement.scrollTop || document.body.scrollTop) > distance ? 'block' : 'none'
} }
function throttle(func, wait) { function throttle(func, wait) {
var timer = null var timer = null
return function () { return function (...args) {
var self = this, args = arguments
if (timer) clearTimeout(timer) if (timer) clearTimeout(timer)
timer = setTimeout(function () { timer = setTimeout(() => {
return typeof func === 'function' && func.apply(self, args) return typeof func === 'function' && func.apply(this, args)
}, wait) }, wait)
} }
} }

View File

@ -27,17 +27,17 @@ Util.addLoadEvent(function() {
},{ // 放大 },{ // 放大
scale: 0.8 scale: 0.8
},{ // 缩小 },{ // 缩小
scale: 1.2 scale: 1.1
},{ // 绕X轴旋转 },{ // 绕X轴旋转
rotate: { x: 30 } rotate: { x: 30 }
},{ // 绕Y轴旋转 },{ // 绕Y轴旋转
rotate: { y: 30 } rotate: { y: 20 }
}] }]
import(/* webpackChunkName: "scrollreveal" */ 'scrollreveal').then(ScrollReveal => { import(/* webpackChunkName: "scrollreveal" */ 'scrollreveal').then(ScrollReveal => {
let index = Math.floor(Math.random() * animateTypes.length) let index = Math.floor(Math.random() * animateTypes.length)
ScrollReveal.default().reveal('.article-index', Object.assign({ ScrollReveal.default().reveal('.article-index', Object.assign({
delay: 200, delay: 200,
container: document.querySelector('#container') container: document.getElementById('container')
}, animateTypes[index])) }, animateTypes[index]))
}) })
} }

View File

@ -92,11 +92,8 @@ function checkScrollSlide(){
} }
function init() { function init() {
var _onscroll = scrollDom.onscroll
var timer = null var timer = null
scrollDom.onscroll = function () { scrollDom.addEventListener('scroll', function(){
// 保留已有的滚动事件回调函数并在新的回调函数中进行调用
typeof _onscroll === 'function' && _onscroll.apply(this, arguments)
if(scrollLock) return if(scrollLock) return
if(timer) clearTimeout(timer) if(timer) clearTimeout(timer)
timer = setTimeout(()=>{ timer = setTimeout(()=>{
@ -105,7 +102,7 @@ function init() {
} }
timer = null timer = null
}, 200) }, 200)
} })
loadMoreItems(defaultStep) loadMoreItems(defaultStep)
} }
export default { init } export default { init }

View File

@ -8,22 +8,23 @@ const Util = (function(){
var t = /&quot;|&lt;|&gt;|&amp;|&nbsp;|&apos;|&#(\d+);|&#(\d+)/g var t = /&quot;|&lt;|&gt;|&amp;|&nbsp;|&apos;|&#(\d+);|&#(\d+)/g
, o = /['<> "&]/g , o = /['<> "&]/g
, u = { , u = {
"&quot;": '"', "&quot;": '"',
"&lt;": "<", "&lt;": "<",
"&gt;": ">", "&gt;": ">",
"&amp;": "&", "&amp;": "&",
"&nbsp;": " " "&nbsp;": " "
} }
, c = /\u00a0/g , c = /\u00a0/g
, a = /<br\s*\/?>/gi , a = /<br\s*\/?>/gi
, i = /\r?\n/g , i = /\r?\n/g
, f = /\s/g , f = /\s/g
, p = {} , p = {}
for (var s in u) for (let s in u) {
p[u[s]] = s; p[u[s]] = s
return u["&apos;"] = "'", }
p["'"] = "&#39;", u["&apos;"] = "'"
{ p["'"] = "&#39;"
return {
encode: function(e) { encode: function(e) {
return e ? ("" + e).replace(o, n).replace(i, "<br/>").replace(f, "&nbsp;") : "" return e ? ("" + e).replace(o, n).replace(i, "<br/>").replace(f, "&nbsp;") : ""
}, },
@ -67,21 +68,9 @@ const Util = (function(){
return e.encode(r) return e.encode(r)
return r return r
}, },
loadScript: function(path) {
var $script = document.createElement('script')
document.getElementsByTagName('body')[0].appendChild($script)
$script.setAttribute('src', path)
},
addLoadEvent: function(func){ addLoadEvent: function(func){
var oldonload = window.onload if(typeof func !== 'function') return
if (typeof window.onload !== "function") { document.addEventListener("DOMContentLoaded", func)
window.onload = func
} else {
window.onload = function() {
oldonload()
func()
}
}
} }
} }
})() })()

View File

@ -43,7 +43,6 @@ function init() {
}) })
} }
// export default { init }
if(!window.themeConfig.pageid) { // 非个性化页面的普通文章 if(!window.themeConfig.pageid) { // 非个性化页面的普通文章
Util.addLoadEvent(init) Util.addLoadEvent(init)
} }