一个基于KISSY的简单的动画导航，效果还不错，有点像flash的效果。鼠标移到每一个连接上，背景滑块会迅速移到该链接下方，同时平滑改变大小，自适应链接尺寸，并伴随来回的轻微波动，动感相当不错，呵呵，废话不多说了，看demo吧。

效果查看： http://www.seejs.com/demos/examples/animNav/index.html

特别感谢评论中各位提出的由于在各个链接中快速移动导致的bug，现在已经做了简单的处理，效果应该好多了，呵呵... 
1. [代码][JavaScript]代码   
<!DOCTYPE html>
 
<html>
<head>
    <meta charset="utf-8">
    <title>KISSY动画导航</title>
<style>
    ul,li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    a {
        text-decoration: none;
    }
    .nav {
        position: relative;
        margin: 0 auto;
        width: 990px;
        _height: 51px;
        background-color: #000;
        font: 14px/1.5 '微软雅黑';
        color: #fff;
    }
    .block {
        position: absolute;
        z-index: 9;
        left: 0;
        top: 0;
        width: 0;
        height: 0;
        border-radius: 4px;
        background-color: #f00;
    }
    .nav-list {
        position: relative;
        _position: absolute;
        z-index: 10;
        padding-left: 20px;
        overflow: hidden;
    }
    .nav-list .item {
        float: left;
        padding: 15px 20px;
    }
    .nav-list .item a {
        color: #fff;
    }
</style>
</head>
<body>
<div id="Y_nav" class="nav">
    <span id="Y_block" class="block"></span>
    <ul class="nav-list">
        <li class="item"><a href="" target="_blank">首页</a></li>
        <li class="item"><a href="" target="_blank">淘宝网</a></li>
        <li class="item"><a href="" target="_blank">天猫商城</a></li>
        <li class="item"><a href="" target="_blank">一淘UX团队PC&广告</a></li>
        <li class="item"><a href="" target="_blank">京东、当当、卓越亚马逊等等</a></li>
    </ul>http://www.huiyi8.com/hehua/
</div> ​
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js"></script>
<script>
(function(S){
    var D = S.DOM, E = S.Event;
    var box = D.get("#Y_nav"), block = D.get("#Y_block"), eles = D.query(".item", "#Y_nav");
    var cur = 0, cur_w = D.outerWidth(eles[cur]), cur_h = D.outerHeight(eles[cur]) - 8, cur_l = eles[cur].offsetLeft, cur_t = eles[cur].offsetTop + 4;
    var _t = null;
    new S.Anim(block, {"left":cur_l,"top":cur_t,"width":cur_w,"height":cur_h}, 0.3, "backOut", function(){}).run();
    E.on(eles, "mouseenter", function(){
        var _this = this;
        if(_t){clearTimeout(_t);}
        _t = setTimeout(function(){
            cur = S.indexOf(_this, eles);
            cur_w = D.outerWidth(eles[cur]), cur_h = D.outerHeight(eles[cur]) - 8, cur_l = eles[cur].offsetLeft, cur_t = eles[cur].offsetTop + 4;
            new S.Anim(block, {"left":cur_l,"top":cur_t,"width":cur_w,"height":cur_h}, 0.5, "backOut", function(){}).run();
        }, 200);
 
    });
})(KISSY);
</script>
</body>
</html>

随机推荐

  1. oracle浅析导致数据库性能问题的常见原因

    ㈠ 不合理的大表全表扫描 详见:点击打开链接 v$session_longops视图记录了超过6秒的所有SQL语句        这其中绝大部是全表扫描的语句! ㈡ 语句共享性不好 常出没在OLTP, ...

  2. killall 命令

    Linux系统中的killall命令用于杀死指定名字的进程(kill processes by name).我们可以使用kill命令杀死指定进程PID的进程,如果要找到我们需要杀死的进程,我们还需要在 ...

  3. Mockito when(...).thenReturn(...)和doReturn(...).when(...)的区别

    在Mockito中打桩(即stub)有两种方法when(...).thenReturn(...)和doReturn(...).when(...).这两个方法在大部分情况下都是可以相互替换的,但是在使用 ...

  4. spring 事务传播行为类型

    事务传播行为种类 Spring在TransactionDefinition接口中规定了7种类型的事务传播行为, 它们规定了事务方法和事务方法发生嵌套调用时事务如何进行传播: 事务传播行为类型 说明 P ...

  5. ULN2003A 使用,有坑

    8脚接24V负极 9脚接24V正极 16接24V继电器,再接到24V正极 1-7无论给5V 正 或 负,10-16都不能达到24V,越靠近输入端的输出端电压越大,最大的才11V,最小的2.5V 最后发 ...

  6. Lorenzo Von Matterhorn(STL_map的应用)

    Lorenzo Von Matterhorn time limit per test 1 second memory limit per test 256 megabytes input standa ...

  7. rm -rf 删除文件找回

    一个不小心rm掉文件了吧? 后悔莫及了吧! 把这段代码加入你的home目录的.bashrc或者.zshrc就可以了! 工作原理: 在你的home目录会创建一个.trash文件夹 里面会按照删除时间 年 ...

  8. 【python】-- 队列（Queue）、生产者消费者模型

    队列(Queue) 在多个线程之间安全的交换数据信息,队列在多线程编程中特别有用 队列的好处: 提高双方的效率,你只需要把数据放到队列中,中间去干别的事情. 完成了程序的解耦性,两者关系依赖性没有不大 ...

  9. Js版json解析

    JsonDecoder={ pos:0, isDigit:function(ch){ return ( ch >= '0' && ch <= '9' )||( ch == ...

  10. CentOS查看和修改MySQL字符集

    通过以下命令查看了MySQL的字符集 连接上mysql服务,输入以下命令 mysql>show variables like 'character_set%'; 显示如下: 为了让MySQL支持 ...