羽中漫步的二期模版装修刚刚收工,优化后的页面体验让人很有成就感;) 在此也把一些技术心得总结出来,想拥有一样的特效套装只需要动动手指咯!<( ̄︶ ̄)/

【第一弹!lavalamp导航】

lavalampnav.jpg

提到jquery的魅力首当其冲就是“滑滑滑~~”了。lavalamp特效的发明人是Ganeshji Marwaha(钢司机么哇哈... ̄▽ ̄#),E文好的可以去看一手资料。neoease把它用在WP主题iNove上广受好评,并写了篇经典的双语教程

这里我的方法略有不同,更简捷和通用化,仅三步包教包会~

  1. 引用jquery库不必多说,lavalamp在1.2.6和1.3.2两个流行版本下都有效。不想上传这个50K的js锦囊,可以直接引用google的文件地址: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 放在body标签外。
  2. css和按钮制作。在你的页面css文件中加上这段代码
    1. /*Lavalamp Menus*/
    2.     #menus {
    3.         float:right;
    4.         width:620px;
    5.         height:60px;
    6.         background:#191919;
    7.         padding-right:20px;
    8.         border-bottom:1px solid #e9e9e9;
    9.         position:relative;
    10.     }
    11.     #menus li {
    12.         float:left;
    13.         display:inline;
    14.     }
    15.     #menus li a {
    16.         position:relative;
    17.         color:#70B9ED;
    18.         height:30px;
    19.         line-height:30px;
    20.         overflow:hidden;
    21.         padding:0 20px;
    22.         text-decoration:none;
    23.         font-size:12px;
    24.         font-weight:bolder;
    25.         float:left;
    26.         z-index:9;
    27.         text-align:center;
    28.         margin-top:13px;
    29.     }
    30.     #menus li a:hover {
    31.         color:#FFAB56;
    32.     }
    33.     #menus li.back {
    34.         background:url(images/lava2.gif) no-repeat right bottom;
    35.         height:30px;
    36.         position:absolute;
    37.         margin-top:13px;
    38.     }
    39.     #menus li.back .left {
    40.         background:url(images/lava2.gif) no-repeat left top;
    41.         height:30px;
    42.         margin-right:9px;
    43.         float:none;
    44.     }

    menus对应html中导航部分的id,image/lava2.gif就是按钮背景图片了,如我的灰方块。

    lava_bground

    只要注意中间的衔接条和色彩一致大家可以自由发挥,常见的有圆角对称扁平下划线式。代码的其他部分如位移和文字颜色等自行修改。
  3. 最后引用lavalamp效果js。仅3K,点击下载。当然还可以犯懒直接用我的<script type="text/javascript" src="http://www.yzmb.me/usr/themes/jwalk/js/lava.js"></script>无保质期就是了~

OK收工,看看你的导航效果吧!是不是很简单?lavalamp作为时下妆点模版的特效首选,短小流畅且兼容性超强——轻轻松松,你也可以拥有!(好土的广告词……( ̄ε(# ̄))

可既然都请来了强悍的jquery库,只用个lavalamp好像有点浪费了。。还有什么好看实用的东东可以装点呢,敬请关注《精彩模版小高招第二弹—%#$@!》(自己找...) ( ̄︶ ̄)y

【小花絮】 lavalamp的前身是Fancy menu由Guillermo Rauch基于mootools库编写,命名人Stephan Beal的灵感来自于同名艺术灯具,原意为“熔岩之光“~

lavalamporg.jpg

(Last modified: 2010-12-29 13:53)