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

2017.02.22

教程 | 坠落式页面


- Tutorial requested by Yw & Angel -

教程如上 ;]

1. 设计 → 页面元素 → 添加小工具 → HTML/JavaScript

2. 添加以下代码:
<center>
<style type="text/css">
#at{
position:fixed;
right: 300px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float: left;
border: 2px solid #ffaad5;
background: #FFFFFF;
border-radius:20px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">

<div style="text-align: center;">
显示的内容
</span></div>
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><div style="color: #FFFFFF;">
<span ></span></div></a></a></div>
</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" src="点击图片的网址" alt="PUSH" title="Click"/></a>
</center>

3. 保存,即可。

小解释
青色代码:页面离旁边的距离  *可改
红色代码:页面的边框厚度、类型、颜色  *可改
紫色代码:页面的背景  *可改
蓝色代码:页面圆角的弧度  *可改
靛色代码:页面的内容(可以是文字 / 图片)  *可改
橙色代码:点击 drop down 页面的图片的网址
浅蓝代码:鼠标指向图片时出现的字  *可改

备注
♥ 若要空行,你必须添加 <br> 在内容的后面,例:
我是内容 1 <br>
我是内容 2

框框的种类

素材
提供自制的 click 图片几张、有需要可以拿去用 ;D

http://i1198.photobucket.com/albums/aa448/shehjing/blogger%20material/click1.gif

http://i1198.photobucket.com/albums/aa448/shehjing/blogger%20material/click2.gif

http://i1198.photobucket.com/albums/aa448/shehjing/blogger%20material/click3.gif

http://i1198.photobucket.com/albums/aa448/shehjing/blogger%20material/click4.gif

10 comments:

  1. Replies
    1. 在【显示的内容 - 靛色代码】里,添加 [img src="图片 URL"]。
      P/s - 请将 [] 改成 <>

      BII.

      Delete
  2. 怎样在图片里加页面链接 ?

    ReplyDelete
    Replies
    1. 这里有教程:http://angelbii.blogspot.com/2012/09/blog-post_14.html

      下次请寻找清楚以后再询问。=]

      BII.

      Delete
  3. 请问要怎样更改照片大小. 我的太大了 :3

    ReplyDelete
    Replies
    1. [img src="图片网址" width="你要的图片宽度"]

      # 将 [] 改去 < >

      -replied by Bii.

      Delete
    2. 还有如果我要放两个, 不可以吗?
      两个不同内容. ;)

      Delete
  4. Bii, Thank you so much! I made mine VERY successfully! Can put two different content but not that neat LOL :D

    ReplyDelete

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

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

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