你的位置:快乐忆站 \ 前端 \ 文章正文

主题效果之动感导航栏

分享了个主题,我能写的东西就多了,哈哈,准备将我现在主题的效果全部共享出来,写成一个系列,摆脱文囧的困扰,这样我就能按时更新啦O(∩_∩)O哈哈~先唠叨几句:这两天发现折腾emlog的童鞋是越来越多了,emlog论坛异常火爆,难道是国庆的原因?不管什么原因,这都是一件好事,这样emlog才能前进,程序开发者才能根据不同人的需要去开发emlog程序,希望4.0的emlog能加入Ajax无刷新留言和嵌套评论,这样才能提高访客的粘度,有利于网站生存!

废话不说了,今天要说的是动感导航栏,还是基于jQuery。(话说这个jQuery还真的很强大!↖(^ω^)↗)具体地动感效果就是鼠标悬浮时会产生翻动的效果,动感十足!下面是代码:

jQuery代码:

$(function(){
    $("#navBar li a").wrapInner('<span class="out"></span>').append('<span class="bg"></span>');
    $("#navBar li a").each(function() {
    $('<span class="over">' + $(this).text() + '</span>').appendTo(this)});
    $("#navBar li a").hover(
        function(){
            $(".out", this).stop().animate({'top': '21px'},200);
            $(".over", this).stop().animate({'top': '0px'},200);
            $(".bg", this).stop().animate({'top': '0px'},100)},
        function(){
            $(".out", this).stop().animate({'top': '0px'},200);
            $(".over", this).stop().animate({'top': '-21px'},200);
            $(".bg", this).stop().animate({'top': '-21px'},100)
        }
    )
})

这次的代码不注释了,太费时了...

css代码:

#navBar ul{padding:0;margin:0;float:right}
#navBar ul li{list-style:none;display:inline;float:left;overflow:hidden;position:relative;line-height:21px}
#navBar ul li a{position:relative;display:block;width:55px;height:21px;letter-spacing:1px;cursor:pointer}
#navBar ul li a span{position:absolute;left:0;width:55px}
#navBar ul li a span.out{top:0}
#navBar ul li a span.over,#navBar ul li a span.bg{top:-21px}
#navBar{height:23px;display:block;font-size:14px;text-align:center}
#navBar ul li span.bg{height:21px;background-color:#43a3e9;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}/*此处可添加背景图片,具体怎么添加就不想说了*/
#navBar a:link,#navBar a:visited,#navBar a:hover{color:#000}

css代码细节可以自行修改,若使用的是我的《clean》主题,则最好将原主题css中#navBar相关代码全部删除并用上述代码代替。Demo见本站导航栏即可!

博客侧边栏加入在线统计,插件将在测试没问题后放出,有SQL错误之类的请千方百计让我知道,谢谢!

好了,不多说了,自行折腾去吧~我要消失了...

写于2010年10月3日晚20:00:00

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 86#
    小邪
    小邪 2010-10-11 04:09 回复
    奇怪,为什么一直显示不出你的
    《div class="location"》《/div》
    里面的东东?
  2. 85#
    小邪
    小邪 2010-10-11 04:07 回复
    呃,为什么今天这篇文章才出现在google reader里面 。。
  3. 84#
    Ray Chow
    Ray Chow 2010-10-10 16:32 回复
    怎么这几天发了这么多
    小松
    小松 2010-10-10 16:48 回复
    一个系列的呗,文囧的写法
    Ray Chow
    Ray Chow 2010-10-10 16:49 回复
    我是真的文囧了,正在四处翻有没有能山寨的内容。
    小松
    小松 2010-10-10 16:50 回复
    我很明智的选择了我最熟悉的主题来折腾~
  4. 83#
    老实人博客
    老实人博客 2010-10-09 19:04 回复
    感觉有点麻烦。我看了ZB官方的类似效果,好像简单一些。当然没有这么强大。
    小松
    小松 2010-10-09 19:56 回复
    呵呵,各个博客都有这种折腾的能人,跟着混就行了~
  5. 82#
    电脑人生
    电脑人生 2010-10-09 13:45 回复
    厉害啊
    小松
    小松 2010-10-09 17:21 回复
    这个,还好啦~
  6. 81#
    七七
    七七 2010-10-08 14:47 回复
    O(∩_∩)O哈哈~效果不错,有机会の也试试!
  7. 80#
    痕
    2010-10-08 11:02 回复
    动感的效果,不错,呵呵。
  8. 79#
    踏雪残情
    踏雪残情 2010-10-07 11:43 回复
    很动感十足,以前就对jquery的动画很好奇。
    小松
    小松 2010-10-07 11:49 回复
    jQuery的动画很强悍,
  9. 78#
    joyla
    joyla 2010-10-07 09:17 回复
    :怪不得 昨天被强制刷新了!还说会很卡!
  10. 77#
    joyla
    joyla 2010-10-06 17:42 回复
    :啥意思??没懂呢?
    小松
    小松 2010-10-06 18:15 回复
    我昨天刚折腾过,你那边的css和js都是原先的,所以要强制刷新一下~
1 2 3 4 5 6 ... »

随机日志:

推荐日志:

彩色标签:

sitemap