不是俺的博客

这是与俺无关的俺的博客?

« z-blog“添加到网摘”按钮的简单实现ie与firefox通用的“添加到收藏”代码 »

z-blog滑动订阅按钮代码

看到一些博客里面有可伸缩的滑动订阅按钮(就是把鼠标放到大按钮上就能自动滑出小按钮,鼠标离开的时候再自动滑进),感觉这样既有趣又能节约侧边栏空间,就想把它拿来。看了看代码,很简单,就是用了java script。当然并非只是zblog能用,按理说wordpress、oblog、boblog、pjblog、xblog等等博客系统都能用,其他BSP的博客系统如果支持js就可以用。

代码如下:
   <script type="text/javascript">
           function popMenu(objId) {
           var obj = document.getElementById(objId);
           if (obj.style.display == 'none') {
               obj.style.display = 'block';
           } else {
               obj.style.display = 'none';
               }
          }       
    </script>

<!--上面这是滑动效果所需要的js代码,如果浏览器仅用了js,效果就没了!-->

<div  class="function" id="menuCaption" onmouseover="popMenu('menuLists');" onmouseout="popMenu('menuLists');" align="center">
<!--上面这句的意思是说,被这个div框起来的东西就是一直露在外面的那玩意儿 ->
<a href="http://feed.feedsky.com/butwho" rel="nofollow"><img style="padding:10px 2px 2px 10px;" alt="RSS Feed" title="rss订阅" src="http://www.butwho.net/image/logo/rss01.gif" /></a>

<!--上面这是大号的订阅按钮,大家在用的时候可以自己挑张好看的图片-->


 <div id="menuLists" style="display:none;" align="center">
<!--上面这句的意思是说,被这个div框起来的东西就是收缩进去的那玩意儿 ->
<!-- Feedsky FEED发布代码开始 -->
<!-- #######这儿放上feedsky或者其他feed什么的发布代码######-->
<!-- Feedsky FEED发布代码结束 -->

</div>
</div>

下边是效果演示:
使用的时候,把上面一段代码放到合适的地方即可。
**啥是合适的地方?对于俺用的zblog 1.7来说,就是TEMPLATE模版文件夹下default.html或者single.html文件中的一个地方,比如<div id="divSidebar">这一行的后面。

插入的订阅代码后面,可以再加上“添加到收藏夹”代码邮件订阅代码,这样虽然多了一个收藏按钮和邮件订阅按钮,但由于这些按钮平时都是收缩状态,并不用担心他们会占用太多地方。

其实这件事情俺以前说过,不过这次公布的是技术细节。也没啥技术含量,放到这儿只是为了显摆罢了。俺的侧边拦就用了这个效果,好事者可以去点击几下看看。

另外,俺在一些地方见到过一个不用javascript只用CSS就能完成的滑动效果,但是俺基本上是个代码盲,没有能力(或者说是没有精力)把那些代码改成俺所需要的形式。好事者可以点击这儿下载css滑动效果代码,然后改成俺的rss订阅按钮那种形式送给俺。不胜感激!
如果这种东西还有人要转载,可以保留下面两段:

本文链接地址:http://www.butwho.net/2008/01/zblog_Mouseon_sliding_Effect_button.html

这是 不是俺的原创文章! 不是俺的博客[http://www.butwho.net]


您可以收藏本文: 用google书签收藏 用“美味书签”收藏 用yahoo收藏 用新浪vivi收藏 用365key收藏 分享到饭否 收藏到qq网摘 用windows live书签收藏 添加到百度搜藏 收藏到“就喜欢” 用收客收藏
 或者您可以订阅俺的博客,这样您即使坐在家里也能看到俺的文章了! rss Feed

 

发表评论:

有什么话尽管说!

最新评论及回复

最近发表

随机文章

Powered By Z-Blog 1.8 Spirit Build 80722

~` 这儿的东西要用署名-非商业性使用-相同方式共享协议进行许可。您在转载的时候最好注意这个,还得链接到俺这儿。谢谢啊!