<!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. Ubuntu16.04 静态IP配置

    Ubuntu16.04 静态IP配置 修改配置 登录系统后,编辑文件/etc/network/interfaces.原始的内容如下: # This file describes the network ...

  2. 酷炫字体背景图的实现——神奇的background-clip: text

    愉快的时光总是飞快,七天小长假已接近尾声,抓住假期的尾巴,再学个新知识点——css的background-clip: text属性...会不会有种陌生的感觉,毕竟在我们的印象里,background- ...

  3. GridView 基本使用

    项目中实例一 <asp:GridView ID="gvBatchReceive" runat="server" AutoGenerateColumns=& ...

  4. WPF 资源字典

    使用好处:存储需要被本地话的内容(错误消息字符串等,实现软编码),减少重复的代码,重用样式,实现多个项目之间的共享资源;修改一个地方所有引用的地方都会被修改,方便统一风格; 使用方法,归纳起来主要有下 ...

  5. 关于windowsServer编程

    1.关于windowsServer编程

  6. Spring - 几种RPC模型的使用与比较

    Spring中,用JMS搞RPC时会用到: org.springframework.jms.remoting.JmsInvokerServiceExporter org.springframework ...

  7. Gradle 学习（一）

    引入插件 apply plugin: 'java' apply plugin: 'war' apply plugin: 'jetty' 如果希望使用jar来启动项目, 可以这样修改项目和插件属性. a ...

  8. No.3一步步学习vuejs之计算属性和观察者

    一.计算属性运行结果 <div id = "demo1"> <p>Original message: "{{message}}"< ...

  9. html--深入理解4种dom对象

    这四个对象是从HTML结构中逐层深入的,分别代表了HTML结构中所有的内容: 1.Document对象 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们 ...

  10. 初识http2.0

    初识http2.0 HTTP2.0性能增强的核心:二进制分帧 HTTP 2.0最大的特点: 不会改动HTTP 的语义,HTTP 方法.状态码.URI 及首部字段,等等这些核心概念上一如往常,却能致力于 ...