<!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. WPF的菜单栏，工具栏的简单使用

    1. 界面效果如下: 2. 页面 .xaml代码如下: <Window x:Class="MenuAndToolBar.MainWindow" xmlns="htt ...

  2. Golang教程：goroutine信道

    在上一篇教程中,我们讨论了如何使用协程实现并发.在这篇教程中,我们将讨论信道以及如何使用信道实现协程间通信. 什么是信道 信道(Channel)可以被认为是协程之间通信的管道.与水流从管道的一端流向另 ...

  3. tomcat 修改 编码

    <Connector URIEncoding="UTF-8" connectionTimeout="20000" port="8080" ...

  4. [转]vs2012 + web api + OData + EF + MYsql 开发及部署

    本文转自:http://www.cnblogs.com/liumang/p/4403436.html 先说下我的情况,b/s开发这块已经很久没有搞了,什么web api .MVC.OData都只是听过 ...

  5. Netezza External Tables --How to use local files in external table

    FROM: http://tennysusantobi.blogspot.com/2012/08/netezza-external-tables.html Netezza External Table ...

  6. jquery获取子元素

    Jquery获取子元素的方法有2种,分别是children()方法和find()方法. 下面我们分别来使用这两种方法,看看它们有何差异. children()方法:获取该元素下的直接子集元素 find ...

  7. spring的事务管理配置

    spring有两种事务配置器,可以使用spring的jdbc事务管理器,也可以使用对hibernate的事务管理器 第一种 使用Spring JDBC或IBatis进行事务配置(配置文件方式): &l ...

  8. xcode8 打开的 xib 踩坑

    之前开发都不敢工测试版的开发,一直用正式版的,xcode7.3.1的模糊匹配让我很蛋疼,自定义的类,类名不提示,每次都粘贴复制,8号苹果发布了 xcode8GM 版,迫不及待的从苹果开发者官网下了一个 ...

  9. Visual Studio Code 的使用

    常用快捷键 常用General 按 Press 功能 Function Ctrl + Shift + P,F1 显示命令面板 Show Command Palette Ctrl + P 快速打开 Qu ...

  10. MySQL基础数据类型

    一 介绍 存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己的宽度,但宽度是可选的 详细参考: http://www.runoob.com/mysql/mysql-data ...