<!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. PHP返回404状态码，由服务器处理

    1. 通过header()方法来实现, 最简单的方法,而且对php的版本没什么限制    <?php          header('HTTP/1.1 404 Not Found');     ...

  2. Spark Streaming初探

    1.  介绍 Spark Streaming是Spark生态系统中一个重要的框架,建立在Spark Core之上,与Spark SQL.GraphX.MLib相并列. Spark Streaming是 ...

  3. 公用表表达式 (CTE)、递归

    指定临时命名的结果集,这些结果集称为公用表表达式 (CTE).公用表表达式可以包括对自身的引用.这种表达式称为递归公用表表达式. 对于递归公用表达式来说,实现原理也是相同的,同样需要在语句中定义两部分 ...

  4. window.location.href.substr(window.location.href.length - 6)

    if (window.location.href.substr(window.location.href.length - 6) == "flag=1") { var tOptio ...

  5. VMware Workstation 12激活码

    VMware Workstation 12 Pro key/注册码: VY1DU-2VXDH-08DVQ-PXZQZ-P2KV8 VF58R-28D9P-0882Z-5GX7G-NPUTF YG7XR ...

  6. ServiceHelper

    public class ServiceHelper { private static string _baseUrl = $@"http://{Config.Instance.MesSer ...

  7. Oracle查询表名超过长度限制的表

    SELECT T.table_name, LENGTH(TRIM(T.table_name)) FROM user_tables t ORDER BY LENGTH(TRIM(t.table_name ...

  8. Python基础学习总结(一）

    1.变量和数据类型 1.1变量 1.每个变量都存储了一个值——与变量相关联的信息. 2.变量不仅可以为整数或浮点数,还可以是字符串,可以是任意数据类型. 1.1.1变量的命名和使用 变量名只能包含字母 ...

  9. maven <resources>标签

    <build> <finalName>com_dubbo_config</finalName> <resources> <resource> ...

  10. springboot项目作为war包运行

    一.首先是pom文件中设置打成war包 < packaging>war< /packaging> 二.然后是修改依赖: <dependency> <group ...