越努力越幸运。
不管如何,我比你努力,比你好,比你更问心无愧。

2017.02.22

教程 | 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="图片 URL" /></div></center></div></div></div>
 3. 保存,即可。

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

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

15 comments:

  1. 請問爲什麽我放下去了就會有一個影子?滑鼠指的時候?
    然後如果我要換去右上角可以嗎。像你的這樣滑下去的,怎樣換呢?
    http://www.miss-wa.blogspot.com

    ReplyDelete
  2. http://www.miss-wa.blogspot.com

    請我能幫我看下嗎?我的放下去會有影子怎樣弄掉影子呢?能夠換地方嗎?比如說右上角像你的這樣滑下來的。。。

    ReplyDelete
    Replies
    1. 影子呢,是因为你放了 image effect. 所以滑鼠指的时候,会有影子。
      换去右上角啊... 很麻烦,因为代码要重新换过了。

      -replied by Bii.

      Delete
  3. 为什么我要放的位置跟你一样.
    但是我跟着步骤放了代码.
    照片出现在右上角的?

    ReplyDelete
    Replies
    1. 可能你不小心更换了某代码。
      这个教程我已经试验很多次了,
      如果没有添加错代码而且也跟着步骤做的话,
      不会有问题的。

      麻烦你把添加的代码删除掉,再次添加,如果还是不行,麻烦你做两件事情。

      # 把你添加的代码拷贝出来,inbox 去我专页。
      # Print screen 一张示例图给我。

      -replied by Bii.

      Delete
  4. Replies
    1. 代码一样,只是把所有代码添加在 [/style] 下面就可以了。

      ps ; [] 改成 <>

      -replied by Bii.

      Delete
  5. 只能放 文字? 能不能一些 HTML?

    ReplyDelete
    Replies
    1. 可以啊、你可以改掉内容,可是效果会不会走掉我就不知道~
      你可以尝试一下 :)

      -replied by Bii.

      Delete
  6. Replies
    1. 这个效果不可以用在小工具那边。

      -replied by Bii.

      Delete
  7. 如果不要Marquee effect的话要怎么弄??

    ReplyDelete
    Replies
    1. 把代码中的 [marquee] [/marquee] < 这两个代码删掉。

      [] = <>

      -replied by Bii.

      Delete
  8. 谢谢哦~ ~拿了代码~ ~

    ReplyDelete

っ 谢谢你耐心的看完这篇帖子 ♥
っ 评论将在博主审核后发布,如有不便,敬请原谅哦 :)
っ 除了评论之外,亲也可以选择在 Cbox 留言或 PM 我的部落格专页信箱

ベ 请用词确切,勿使用脏字哟
ベ 部落格不接受匿名评论,评论前请确保你拥有 Google Account 哦
ベ 请仔细列明你的问题好方便我回答哦 :)

* 感谢你的留言,欢迎下次再来。