一个基于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. webpack 功能大全 【环境配置】

    1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机 ...

  2. mysql命令行导入和导出数据

    首先打开命令窗口,输入命令:mysql -h localhost -u selffabu -p 连接成功后,进行下面的操作 MySQL中导出CSV格式数据的SQL语句样本如下: select * fr ...

  3. [译]GLUT教程 - 移动镜头2

    Lighthouse3d.com >> GLUT Tutorial >> Input >> Move the Camera II 本节的最后一个示例是回顾.现在我们 ...

  4. 《TomCat与Java Web开发技术详解》（第二版） 第四章节的学习总结--常用Servlet API

    要开发Servlet,自然要掌握常用的servlet的相关API.通过此章节的学习,了解到如下常用API 1.Servlet接口--->GenericServlet抽象类(实现Servlet接口 ...

  5. Android中的常见通信机制和Linux中的通信机制

    Handler Handler是Android系统中的一种消息传递机制,起作用是应对多线程场景.将A进程的消息传递给B线程,实现异步消息处理.很多情况是将工作线程中需要更新UI的操作消息传递给UI主线 ...

  6. 七. PHP模式设计----运行及描写叙述任务

    1. 解析器模式 //解析器内容类 //用于存放表达式的运算结果,并且能依据传入的表达式返回当初记录的结果 class InterpreterContext{ private $expressions ...

  7. HDU-4031-Attack(树状数组)

    Problem Description Today is the 10th Annual of "September 11 attacks", the Al Qaeda is ab ...

  8. Centos 安装libreoffice 生成office 报错信息见内容

    个人博客:https://blog.sharedata.info/ 错误信息:/opt/libreoffice5.2/program/soffice.bin: error while loading ...

  9. fedora找开ftpd服务器并以root登陆

    工作原因需要在federal中弄个vsftpd再用root去登陆(我知道这样不太安全) 确认系统的版本 [root@localhost ~]# uname -a Linux localhost.loc ...

  10. cocos2d-x3.6 生成带类图的离线文档

    我的博客:http://blog.csdn.net/dawn_moon cocos2d-x的官网有点慢,并且最新3.6的在线API文档居然没有了类图,不知道什么原因,之前2.2.6都是有的. 只是能够 ...