一个基于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. 好员工去哪儿了：高端IT白领荒胜过春节保姆荒

    来自:http://tech.163.com/14/0312/07/9N4BLV8S000915BD.html 于是,你看到的就是这样一幕悖论:一群手握大把工作机会的雇主,在面对一群眼巴巴等待工作机会 ...

  2. 事件驱动模型实例详解（Java篇）

    或许每个软件从业者都有从学习控制台应用程序到学习可视化编程的转变过程,控制台应用程序的优点在于可以方便的练习某个语言的语法和开发习惯(如.net和java),而可视化编程的学习又可以非常方便开发出各类 ...

  3. hdu 1010 Tempter of the Bone 奇偶剪枝

      如果所给的时间(步数) t 小于最短步数path,那么一定走不到. 若满足t>path.但是如果能在恰好 t 步的时候,走到出口处.那么(t-path)必须是二的倍数. 关于第二种方案的解释 ...

  4. 从分类,排序,top-k多个方面对推荐算法稳定性的评价

    介绍 论文名: "classification, ranking, and top-k stability of recommendation algorithms". 本文讲述比 ...

  5. u-boot README--Memory Management&initialize

    Memory Management:------------------ U-Boot runs in system state and uses physical addresses, i.e. t ...

  6. 【PHP】富文本HTML过滤器：HTMLPurifier使用教程（防止XSS）

    在编程开发时安全问题是及其重要的,对于用户提交的数据要进行过滤,XSS就是需要重视的一点,先说一下什么是XSS,简单来说就是用户提交数据(例如发 表评论,发表日志)时往Web页面里插入恶意javasc ...

  7. mysql 5.7 迁移数据方案

    从一台服务器迁移至其他服务器,如何选择最短的停服时间方案 方案一.凌晨3点的全备份+停服后一天的大概一天的增备 1. 拷贝前一天的全备份至新的服务器 rsync -auzrP /Data/dbbak/ ...

  8. 【C#学习笔记】之用button使得textbox中数字的值增减

    代码段: string t = ""; t = mv.textBox2.Text; int n = int.Parse(t); n = n + 1; mv.textBox2.Tex ...

  9. flex弹性盒模型

    flex 意思是弹性布局,用来给盒模型提供最大的灵活度,指定容器中的项目为弹性布局,类似于float:left; 比float的好处是容器没有设置高度,会根据项目来自适应高度,我们都知道,设置floa ...

  10. SecureCRT 设置字体跟颜色

    SecureCRT 绝佳配色方案, 保护你的眼睛 分类: Linux 软件使用2013-05-17 08:45 24038人阅读 评论(11) 收藏 举报 SecureCRT 绝佳配色方案, 保护你的 ...