教程 | Slide Out Status Bar

十一月 02, 2021 | views
Comments 0
教程 | Slide Out Status Bar 这篇教程好像拖了 Allva 好久。Erm,, 也不知道我有没有记错,是不是 Allva 要求的。如果不是的话,麻烦通知我一声啊。歹势啊。其实这个教程吼,代码真的是我乱

教程 | Slide Out Status Bar

这篇教程好像拖了 Allva 好久。Erm,, 也不知道我有没有记错,是不是 Allva 要求的。如果不是的话,麻烦通知我一声啊。歹势啊。其实这个教程吼,代码真的是我乱乱弄出来的,就算发布了,也不知道你们明白没有。囧。所以,如果要跟我拥有相同效果的亲们呢,有一些代码你们还是不要更换的好,我怕一换了,就弄不到那个效果出来了。不好意思啊。

最近可能会减少更新。Hmm, 网速真的很不给力。看戏上网不能同时一起进行 :( hurt 有时候部落格根本就是 load 到我发脾气。面书更惨,一直 refresh refresh 都不会出现首页。oMo 所以教程素材可能都会减少。对不起哟。颗颗。


- Tutorial requested by Allva -

1. 布局 - 添加小工具 - HTML/JavaScript

2. 添加以下代码:

<style type="text/css">
#stat {
padding: 3px;
width: 280px;
text-align: center;
position:fixed;
left:-250px;
top:250px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}
#stat:hover {
top:250px;
left:10px;
}
</style>

<div style="position:fixed;">
<div id="stat">
<div class="stat"><center>
<div style='width:200px;background:#ffffff; padding: 3px; border:1px dashed #cccccc; filter:alpha(opacity=1.5); border-radius:5px; color:#000000;'><center><marquee behavior='scroll' direction='left' scrollamount='4'>状态内容</marquee></center></div>
<div style="margin-top:-30px;margin-left:250px;"><img src="http://img.juhife542d.com图片 URL" /></div></center></div></div></div>
 3. 保存,即可。

小解释
蓝色代码:整个状态的宽度
红色代码:1 - 距离顶部的距离
                      2 - hover 后,距离顶部的距离(可以选择跟上面红色代码一样 / 加大代码)
红色代码:状态框框的宽度
紫色代码:状态框框的类型 / 粗度 / 颜色
青色代码:状态框框的形状(可参考此帖)
紫色代码:状态字体的颜色
紫色代码:状态的内容(替换成你的内容)
蓝色高亮:状态旁边图片的网址

# 劝言:各位还是不要更换那些宽度什么的会比较好哦,真的,我怕一换了,就会失去那个原本的效果了。当然,如果你坚持要换也是可以。若是真的效果走掉了,你弄不到的话,欢迎你留言给我哟。能帮的一定会帮。