<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul,li{

            list-style:none;

        }

        a{

            color:#333;

            text-decoration:none;

        }

        .clearfix{

            zoom:1;

        }

        .clearfix:after{

            content:".";

            display:block;

            width:0;

            height:0;

            visibility:hidden;

            clear:both;

        }

        .menu{

            position:relative;

            height:30px;

            line-height:30px;

            width:412px;

            margin:20px auto;

            background:#000;

            overflow:hidden;

        }

        .menu ul{

            position:relative;

        }

        .menu li{

            float:left;

            height:100%;

        }

        .menu li a{

            display:block;

            padding:0 18px;

            color:#fff;

            font-size:14px;

        }

        .box{

            height:100%;

            position:absolute;

            top:0;

            left:0;

            width:64px;

            background:deeppink;

            overflow:visible;

            -webkit-filter: blur(0px);

        }

        .box .left,.box .right{

            width:0;

            height:100%;

            position:absolute;

            top:0;

            border-radius:50%;

            -webkit-border-radius:50%;

        }

        .box .left{

            left:0;

            background:deeppink;

        }

        .box .right{

            right:0;

            background:#000;

        }

        .box.active .left{

            background: #000000;

        }

        .box.active .right{

            background: deeppink;

        }

    </style>

</head>

<body>

<div class="menu">

    <div class="box">

        <div class="left"></div>

        <div class="right"></div>

    </div>

    <ul class="clearfix">

        <li ind="1"><a href="javascript:void(0);">首页</a></li>

        <li ind="2"><a href="javascript:void(0);">课程</a></li>

        <li ind="3"><a href="javascript:void(0);">视频</a></li>

        <li ind="4"><a href="javascript:void(0);">问答</a></li>

        <li ind="5"><a href="javascript:void(0);">会员</a></li>

        <li ind="6"><a href="javascript:void(0);">联系方式</a></li>

    </ul>

</div>

</body>

<script src="../jquery-1.11.3.min.js"></script>

<script>

    var lastIndex=0;

    $(".menu li").hover(function(){

        var $this=$(this),

                $index=$this.index(),

                $width=$this.width(),

                num= 0,timer1,flag=$index;

        for(var i=0;i<$index;i++){

            num+=$this.siblings().eq(i).width();

        }

        var f=1;

        if(lastIndex>$index){//向左

            f=-1;

        }else{//向右

            f=1;

        }

        var i = Math.abs($index-lastIndex);

        lastIndex = $index;

        clearTimeout(timer1);

        timer1=window.setTimeout(function(){

            $(".box").css({width:$width}).animate({left:num},100*i).delay(10);

            if(f>0){//向右

                $(".box").addClass("active");

            }else{

                $(".box").removeClass("active");

            }

            $(".left").animate({width:"30",left:"-15px"},100*i).animate({width:0,left:0},20);

            $(".right").animate({width:"30px",right:"-15px"},100*i).animate({width:0,right:0},20);

        },100);

    },function(){

    })

</script>

</html>

jq仿 妙味课堂导航01的更多相关文章

  1. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  2. 妙味课堂——JavaScript基础课程笔记

    集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...

  3. 妙味课堂——HTML+CSS(第四课)(二)

    单开一篇来讲一个大点的话题——清浮动    来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...

  4. 妙味课堂——HTML+CSS(第一课)

    一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...

  5. 妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示

    1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...

  6. 妙味课堂史上最全的javascript视频教程，前端开发人员必备知识点，新手易学，拔高必备！！！

    妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分  ...

  7. 用jQuery制作仿网易云课堂导航菜单效果

    最近做项目,用到类似的效果. 效果图如下: 直接上代码: HTML: <!DOCTYPE html> <html lang="en"> <head&g ...

  8. 妙味课堂:JavaScript初级--第12课：json与数组

    1.json数据格式及json语法 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  9. 妙味课堂——HTML+CSS(第四课)(一)

    这一课学的东西真是太多了,还不赶快记下来,留待以后慢慢回味! 首先我们回顾一下inline-block的特性: 使块元素在一行显示 使内嵌支持宽高 换行被解析了(问题) 不设置宽度的时候,宽度由内容撑 ...

随机推荐

  1. poj 2501 Average Speed

    Average Speed Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4842   Accepted: 2168 Des ...

  2. freemarker实现通用布局的模板拆分与复用

    原文:http://www.hawu.me/coding/733 一.基础页面布局 假设我们项目页面的通用布局如下图所示: 实现这样的布局的基本html代码如下:           XHTML   ...

  3. <数据挖掘导论>读书笔记6关联分析的高级概念

    处理联系属性: 基于离散化的方法 基于统计学的方法 非离散化方法 处理概念分层 定义在一个特定领域的各种实体或者概念的多层组织.概念分层可以用有向无环图DAG来标示. 序列模式 可选计数方案 COBJ ...

  4. Python 读取图像文件的性能对比

    Python 读取图像文件的性能对比 使用 Python 读取一个保存在本地硬盘上的视频文件,视频文件的编码方式是使用的原始的 RGBA 格式写入的,即无压缩的原始视频文件.最开始直接使用 Pytho ...

  5. Magento 2开发教程 - 创建新模块

    视频在youtube网站国内访问不了,可以使用FQ软件查看. 视频地址:www.youtube.com/embed/682p52tFcmY@autoplay=1 下面是视频文字介绍: Magento ...

  6. jQuery实现单击和鼠标感应事件。

    1.实现单击事件动态交替http://www.cnblogs.com/ahthw/p/4232837.html讲到了toggleClass(),对于单击事件而言,jQuery同样提供了动态交替的tog ...

  7. Java - 让1+1的结果变成3

    原出处是国外某论坛某帖子中楼主提问:如何让1+1=3?于是出现了各种语言实现的各种机制的答案,当然其中也包括直接用字符串输出"1+1=3"...最后被采纳的是用Java语言实现的答 ...

  8. Android - 内存泄漏的情况以及解决方法

    [译]Android内存泄漏的八种可能(上) Android防止内存泄漏的八种方法(下). Static Activities 在类中定义了静态Activity变量,把当前运行的Activity实例赋 ...

  9. 获取页面z-index最大值

    getMaxZIndex = function () { var maxZ = Math.max.apply(null, $.map($('body *'), function(e,n) { if ( ...

  10. mui.ajax()和asp.net sql服务器数据交互【2】json数组和封装

    今天没有做循环创建显示:可以参考张鑫旭的文章:<基于HTML模板和JSON数据的JavaScript交互> 1.ashx页面代码 //下面的封装一般框架底层都是写好的:连接 数据库和获取D ...