一个基于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. 使用第三方工具Cornerstone搭建本地SVNserver

    一.加入版本号资源库 点击Cornerstone左下角REPOSITORIES栏右边的加号button.在弹出的视图中选择File Repository,然后选择Create a New Reposi ...

  2. oracle、MySQL、SQL Server的比较

    MySql的优点:1 MYSQL支持5000万条记录的数据仓库(3.x版本就支持了) 2 MYSQL适应所有平台 . 3 MYSQL是开源软件,开源的东西似乎总是比较实在一点,不会有太多商业化的考虑. ...

  3. 调用bat文件执行java文件

    set path=./jre7/bin--设置jre路径,可以写jre的全路径java -cp "lib/*;" -Xms256m -Xmx512m com.shentong.Ma ...

  4. 如何在Windows 10 IoT Core中添加其他语言的支持，如中文

    目前很多开发者已经开始使用Windows 10 IoT来做物联网领域的开发了,目前Windows 10 IoT Core的版本支持树莓派2(以及新出的树莓派3).Minnowboard Max以及Dr ...

  5. dedecms增加自定义表单管理员

    打开\dede\inc\grouplist.txt 添加 >>自定义表单 >f_List>列出表单 >f_New>新建表单 >f_Edit>编辑表单 & ...

  6. string 和 stringbuffer的区别？

    string和stringbuffer的区别其实是变量和常亮的关系,string和stringbuffer内部实现的原理不同,在修改string对象时会产生另外的对象,也就是说在内存中会有两个存储区域 ...

  7. 最小生成树——Kruskal（克鲁斯卡尔）算法

    [0]README 0.1) 本文总结于 数据结构与算法分析, 源代码均为原创, 旨在 理解 Kruskal(克鲁斯卡尔)算法 的idea 并用 源代码加以实现: 0.2)最小生成树的基础知识,参见 ...

  8. 录音整理文字工具otranscribe简介

    网址: http://otranscribe.com/ 首先载入音频文件,支持 mp3, ogg, webm, wav (HTML5 无需将文件上传至服务器,可保护隐私),然后就可以边听边整理了. 通 ...

  9. Android拍照生成缩略图

    在Android 2.2版本中,新增了一个ThumbnailUtils工具类来是实现缩略图,此工具类的功能是强大的,使用是简单,它提供了一个常量和三个方法.利用这些常数和方法,可以轻松快捷的实现图片和 ...

  10. 【原创】Hibernate自动生成（1）

    本实战是博主初次学习Java,分析WCP源码时,学习HibernateTools部分的实战,由于初次接触,难免错误,仅供参考,希望批评指正. 开发环境: Eclipse Version: Photon ...