坠落式通告

转载请贴上部落连接

目前这个应该还没有人发布,所以转载请务必贴上连接,否则会被我认为抄袭 !!!

这个是你点击了一个图片后就会有一个东西从上面滑下来,好像通告这样的,你可以在里面放照片,写一些东西

你可以点击我部落格旁边的那个 Click This 的图片直接查看效果

想要添加的话就要跟着我的步骤做,这个蛮复杂的说@@

先到设计 --> 添加小工具 --> Html / Jave Script 把以下的代码放下去
<center>
<style type="text/css">
#at{
position:fixed;
right:450px;
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 repeat-x bottom center scroll ;
-moz-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>
温馨小提示❤
❤ 红色的字 --> 外框的厚度
粉色的字 --> 外框的种类
浅紫的字 --> 外框的颜色
青色的字 --> 背景的颜色
浅蓝的字 --> 字体的位置
* center = 中间
* Left = 左边
* Right = 右边
❤ 黄色的字  --> 要显示的内容,什么都可以哦
想要添加图片的话代码如下:
<img src="图片网址" />
想要空到下一行的话请添加 <br/> ,例子如下
Welcome
<br/>
Mine Follow me ok?  :-)
橙色的字 --> 点击图片的网址
自己制作了几个 Click Me 的图片,喜欢可以拿去哦 =))
http://i1111.photobucket.com/albums/h468/Han_Er21/clickme.png
 http://i1111.photobucket.com/albums/h468/Han_Er21/clickme2.png
 http://i1111.photobucket.com/albums/h468/Han_Er21/clickme3.png
 http://i1111.photobucket.com/albums/h468/Han_Er21/click4.png
外框的种类如下:

7 条评论:

  1. 心翼SUNNY☆Kuro兔:

    成功了再告诉我啊

    不客气 XD

    回复删除
  2. 我还没弄,不好意思啊...:P
    成功了我再告诉你!!

    回复删除
  3. 心翼SUNNY☆Kuro兔:

    哈哈,成功就好了啦 XDD

    回复删除
  4. 不过我弄到了一些东西。。
    所以又失败了。
    之后我再调整回去。。:P

    回复删除

留言规则 请勿犯规 :)

--------------------------------------------------------------------------------

1、由于评论太哆,有些我不能一一评论

2、如有捣乱着,恕我删除留言

3、有些博友要的教程,请勿再三询问,请到教程列表里仔细寻找

谢谢 :)