<!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. 数据链路层差错检测之循环冗余检验CRC

    引用https://blog.csdn.net/wenqiang1208/article/details/71641414 为什么引入CRC 现实的通信链路都不会是理想的.这就是说,比特在传输的过程中 ...

  2. bzoj 3512: DZY Loves Math IV

    Description 给定n,m,求 模10^9+7的值. Solution 设 \(S(n,m)\) 表示 \(\sum_{i=1}^{m}\phi(n*i)\) \(Ans=\sum_{i=1} ...

  3. SQL 文件以及文件组

    1.SQL Server根据分区表名查找所在的文件及文件组实现脚本 --SQL Server根据分区表名查找所在的文件及文件组实现脚本 SELECT fg.name AS FileGroupName ...

  4. 在WPF中自定义控件

    一, 不一定需要自定义控件在使用WPF以前,动辄使用自定义控件几乎成了惯性思维,比如需要一个带图片的按钮,但在WPF中此类任务却不需要如此大费周章,因为控件可以嵌套使用以及可以为控件外观打造一套新的样 ...

  5. js设置下拉框选中后change事件无效解决

    下拉框部分代码: <select id="bigType"> <option value="">请选择</option> & ...

  6. redis操作基本命令

    Redis—— Remote Dictionary Server,它是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API,我们 ...

  7. JSON 转 VO

    需求 将获取的json数据直接转为vo 解决 利用net.sf.json.JSONObject的toBean() 确保json中的key值和vo中的字段名称一致 JSONObject jsonObje ...

  8. javaweb之jsp标签

    1.JSP标签简介 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 2.JSP常用标签 ...

  9. Java String、string[]、List初始化方法

    String初始化: 1.String str = new String("string1"); 2.String str = "string1"; Strin ...

  10. PAT 1048. Find Coins

    two sum题目,算是贪婪吧 #include <cstdio> #include <cstdlib> #include <vector> #include &l ...