一个基于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. pycharm下： conda installation is not found ----一个公开的bug的解决方案

    pycharm  conda installation is not  found ----一个公开的bug的解决方案 pycharm+anaconda 是当前的主流的搭建方案,但是常出现上述问题. ...

  2. JAVA读取文件夹大小的几种方式

    (一)单线程递归方式 package com.taobao.test; import java.io.File; public class TotalFileSizeSequential { publ ...

  3. 第1章列表处理——1.1 Lisp列表

    Lisp是啥? Lots of Isolated Silly Parentheses (大量分离的愚蠢的括号) Lisp指的是"LISt Processing"(列表处理),通过把 ...

  4. 【JMeter4.0学习（十）】之JMeter函数简单运用以及结合正则表达式提取器

    下面来简单的举个栗子: 首先,把函数和正则表达式提取器放在一块来介绍,如下所示: 1.结构完整展示,下面再一步一步创建添加: 2.添加线程组: 3.首先添加HTTP请求1 4.添加结果树后,运行后查看 ...

  5. SharePoint 2013的100个新特性 免费电子书下载

    简介:这本电子书对SharePoint 2013的100个新特性和改进的功能提供了一个简短的说明,这些功能分为以下几类: 1. SharePoint 2013内容管理 2. SharePoint 20 ...

  6. vue实践---vue结合 promise 封装原生ajax

    有时候不想使用axios这样的外部依赖,想自己封装ajax,这里有两种方法 方法一,在单个页面内使用 封装的代码如下: beforeCreate () { this.$http = (() => ...

  7. 转载 iOS js oc相互调用（JavaScriptCore） --iOS调用js

    iOS js oc相互调用(JavaScriptCore)   从iOS7开始 苹果公布了JavaScriptCore.framework 它使得JS与OC的交互更加方便了. 下面我们就简单了解一下这 ...

  8. Struts2+hibernate+spring 配置事物

    今天自信看了看hibernate的事物配置问题,转载了其他人的日志,仅用来学习. struts+hibernate+spring事务配置 (2009-01-14 21:49:47) 转载▼ 标签: i ...

  9. Unity框架入门

    介绍Unity框架之前,先要说几个概念DIP依赖倒置原则.IOC控制反转.DI依赖注入 DIP是设计原则之一,定义:上层不应该依赖于底层,两者都依赖于抽象: 抽象不依赖于细节,细节应该依赖于抽象. 像 ...

  10. Leftmost Digit(hdu1060)(数学题)

    Leftmost Digit Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...