一个基于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. centos关机与重启命令详解

    Linux centos关机与重启命令详解与实战 Linux centos重启命令: 1.reboot   普通重启 2.shutdown -r now 立刻重启(root用户使用) 3.shutdo ...

  2. Hibernate 中的DetachedCriteria。

    今天看到项目中在Web层使用DetachedCriteria进行多条件查询操作,如果在web层做持久层操作,事物还存在吗?这是我第一反应,于是乎就去网上查资料了.结果发现即在web层,程序员使用Det ...

  3. Selenium+Python ：WebDriver设计模式( Page Object )

    Page Object 设计原理 Page Object设计模式是Selenium自动化测试项目的最佳设计模式之一,强调测试.逻辑.数据和驱动相互分离. Page Object模式是Selenium中 ...

  4. Zxing二维码解析——图文转换

    一:文字转化为二维码图片. package com.xhm.tool; import java.util.Hashtable; import android.graphics.Bitmap; impo ...

  5. hihoCoder #1321 : 搜索五•数独 （Dancing Links ,精确覆盖）

    hiho一下第102周的题目. 原题地址:http://hihocoder.com/problemset/problem/1321 题意:输入一个9*9数独矩阵,0表示没填的空位,输出这个数独的答案. ...

  6. stm32DMA通道 ADC通道

    DMA: 1.使用DAC的时候.将转化后得到的模拟信号通过IO口输出的时候.为什么还将IO口配置能输入模式 PS:stm32手冊上定义PA4和PA5分别和DAC1通道和DAC2通道相连  : DMA1 ...

  7. WCF基础之数据协定

    数据协定最重要的当然就是DataContract和DataMember.这两个特性能应用到类.结构和枚举.这个两个特性跟服务契约的特点是一样的,只有被DataContract标记的类和类中被标记Dat ...

  8. sgu 1348 Goat in the Garden 2【点到线段的距离】

    链接: http://acm.timus.ru/problem.aspx?space=1&num=1348 http://acm.hust.edu.cn/vjudge/contest/view ...

  9. 深入 JavaScript 中的对象以及继承原理

    ES6引入了一个很甜的语法糖就是 class, class 可以帮助开发者回归到 Java 时代的面向对象编程而不是 ES5 中被诟病的面向原型编程. 我也在工作的业务代码中大量的使用 class, ...

  10. Bootstrap学习-菜单-按钮-导航

    1.下拉菜单(基本用法) 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“d ...