效果展示
首页效果:
点击效果:
点击Aqua后会在网站上随机浮现neeeeeeeee~
或mooooooooo~
字样的粉色泡泡
点击超过一定次数:
Aqua从页面消失5分钟,并留下一句话
为了不影响到阅读效果,毕竟我文章界面一大半空间已经放了兔子小分队1的图了,所以Aqua只会在PC端首页显示,下面就来说说是如何实现的吧!
实现
因为大部分功能都是依赖这个博客主题VOID
里面一些部件修改而来的,比如Aqua通知框其实就是模板通知部件VOID.alert()
改了个颜色。So,咱要干的第一件事就是在模板自带JS
文件里仿照模板原生方法加一个自定义小组件2
泡泡的类名为msg_box
msg_box: function (content, time) {
var errTemplate = '<div class="msg_box" id="msg{id}">{Text}</div>';
var id = new Date().getTime();
$('body').prepend(errTemplate.replace('{Text}', content).replace('{id}', id));
$.each($('.msg_box'), function (i, item) {
if ($(item).attr('id') != 'msg_box' + id) {
$(item).css('top', $(item).offset().top - $(document).scrollTop() + $('.msg_box#msg' + id).outerHeight() + 20 + 'px');
}
});
$('.msg_box#msg' + id).addClass('show');
var t = time;
if (typeof (t) != 'number') {
t = 2500;
}
setTimeout(function () {
$('.msg_box#msg' + id).addClass('hide');
setTimeout(function () {
$('.msg_box#msg' + id).remove();
}, 1000);
}, t);
}
然后在模板css
文件里加入样式如下:
.msg_box {
color: white;
position: fixed;
top: 70px;
background: #FFA6EA;
padding: .7rem;
border-radius: 4px;
-webkit-box-shadow: 0 0 20px 2px rgba(0,0,0,.1);
box-shadow: 0 0 20px 2px rgba(0,0,0,.1);
-webkit-transition: .5s cubic-bezier(.25,.46,.45,.94) all;
transition: .5s cubic-bezier(.25,.46,.45,.94) all;
right: 0;
line-height: 1.5;
z-index: 20;
max-width: calc(100vw - 3rem);
overflow: hidden;
word-break: break-all
}
.msg_box.show {
-webkit-animation: fade-in .5s;
animation: fade-in .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: .3;
animation-delay: .3
}
.msg_box.hide {
-webkit-animation: fade-out .5s;
animation: fade-out .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: .3;
animation-delay: .3
}
样式表修改完后可以开个无痕模式在console
里运行以下代码试试,成功的话页面会正确显示hello world
的粉色泡泡
VOID.msg_box("hello world")
接下来在主页的html
上写个<div>
用来显示/隐藏Aqua
<div id="waifu" style="bottom: 0; position: fixed"></div>
最后写个点击事件就行了 ,因为博主没学过js,代码是网上东拼西凑写出来的
// Aqua组件
if (!/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
function createCookie(name, value, minutes) {
if (minutes) {
var date = new Date();
date.setTime(date.getTime() + (minutes * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else {
var expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
var onion_img = document.createElement("img");
onion_img.src = "https://static.cirno.me/pictures/onion.png";
onion_img.id = "onion_img";
onion_img.width = 126.989;
onion_img.alt = "waifu";
onion_img.draggable = false;
onion_c = (document.cookie.match(/^(?:.*;)?\s*onion\s*=\s*([^;]+)(?:.*)?$/) || [, null])[1];
onion_show = (document.cookie.match(/^(?:.*;)?\s*onion_show\s*=\s*([^;]+)(?:.*)?$/) || [, null])[1];
var onion_event = document.getElementById("waifu");
// init onion image
if (onion_c != null && onion_event != null) {
onion_event.remove();
} else if (onion_event != null && document.getElementById("onion_img") == null) {
onion_event.appendChild(onion_img);
}
var click_count = 0;
var events = ['Aqua date with mea', 'Aqua in WC', 'Aqua on streaming', 'Aqua play CSGO',
'Aqua doesn\'t wanna see u', 'Aqua play arcaea'
];
$(function() {
if (onion_event != null) {
if (onion_c != null && onion_show == null) {
VOID.msg_box("Waiting for Aqua...");
createCookie("onion_show", true, 1);
}
onion_event.onclick = function() {
click_count += 1;
if (click_count > 15) {
VOID.msg_box(events[Math.floor(Math.random() * events.length)] + '...');
createCookie('onion', true, 5);
onion_event.remove();
} else if (Boolean(Math.round(Math.random()))) {
VOID.msg_box("ねぇぇぇぇぇぇぇぇぇ~");
} else {
VOID.msg_box("もぉぉぉぉぉぉぉぉぉ~");
}
}
}
});
}
一切就绪不出所料大家博客上也会多一只可爱的阿夸啦