View Code? Open in Web Editor
NEW
This project forked from wangscaler/myblog
基于vuepress-theme-reco搭建的个人博客,集成了彩带特效,看板娘,公告,评论,悬浮气泡,鼠标特效,音乐播放器等
Home Page: http://blog.scalerwang.com
License: MIT License
myblog's Introduction
home |
heroText |
tagline |
heroImageStyle |
bgImage |
bgImageStyle |
isShowTitleInHome |
actionText |
actionLink |
features |
true |
WangScaler |
欢迎参观我的博客 |
maxWidth |
width |
display |
margin |
background |
borderRadius |
600px |
100% |
block |
9rem auto 2rem |
#fff |
1rem |
|
back1.gif |
|
false |
Guide |
/views/other/guide |
title |
details |
Yesterday |
开发一款看着开心、写着顺手的 vuepress 博客主题 |
|
title |
details |
Today |
希望帮助更多的人花更多的时间在内容创作上,而不是博客搭建上 |
|
title |
details |
Tomorrow |
希望更多的爱好者能够参与进来,帮助这个主题更好的成长 |
|
|
<style>
.anchor-down {
display: block;
margin: 12rem auto 0;
bottom: 45px;
width: 20px;
height: 20px;
font-size: 34px;
text-align: center;
animation: bounce-in 5s 3s infinite;
position: absolute;
left: 50%;
bottom: 30%;
margin-left: -10px;
cursor: pointer;
}
@-webkit-keyframes bounce-in{
0%{transform:translateY(0)}
20%{transform:translateY(0)}
50%{transform:translateY(-20px)}
80%{transform:translateY(0)}
to{transform:translateY(0)}
}
.anchor-down::before {
content: "";
width: 20px;
height: 20px;
display: block;
border-right: 3px solid #fff;
border-top: 3px solid #fff;
transform: rotate(135deg);
position: absolute;
bottom: 10px;
}
.anchor-down::after {
content: "";
width: 20px;
height: 20px;
display: block;
border-right: 3px solid #fff;
border-top: 3px solid #fff;
transform: rotate(135deg);
}
</style>
<script>
export default {
mounted () {
const ifJanchor = document.getElementById("JanchorDown");
ifJanchor && ifJanchor.parentNode.removeChild(ifJanchor);
let a = document.createElement('a');
a.id = 'JanchorDown';
a.className = 'anchor-down';
document.getElementsByClassName('hero')[0].append(a);
let targetA = document.getElementById("JanchorDown");
targetA.addEventListener('click', e => { // 添加点击事件
this.scrollFn();
})
},
methods: {
scrollFn() {
const windowH = document.getElementsByClassName('hero')[0].clientHeight; // 获取窗口高度
document.documentElement.scrollTop = windowH; // 滚动条滚动到指定位置
}
}
}
</script>
myblog's People
Contributors