jq仿 妙味课堂导航01
<!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的更多相关文章
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- 妙味课堂——JavaScript基础课程笔记
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...
- 妙味课堂——HTML+CSS(第四课)(二)
单开一篇来讲一个大点的话题——清浮动 来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...
- 妙味课堂——HTML+CSS(第一课)
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...
- 妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示
1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...
- 妙味课堂史上最全的javascript视频教程，前端开发人员必备知识点，新手易学，拔高必备！！！
妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分 ...
- 用jQuery制作仿网易云课堂导航菜单效果
最近做项目,用到类似的效果. 效果图如下: 直接上代码: HTML: <!DOCTYPE html> <html lang="en"> <head&g ...
- 妙味课堂:JavaScript初级--第12课：json与数组
1.json数据格式及json语法 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 妙味课堂——HTML+CSS(第四课)(一)
这一课学的东西真是太多了,还不赶快记下来,留待以后慢慢回味! 首先我们回顾一下inline-block的特性: 使块元素在一行显示 使内嵌支持宽高 换行被解析了(问题) 不设置宽度的时候,宽度由内容撑 ...
随机推荐
- Hibernate各种查询操作（二）
一.QBC的查询方式 使用QBC不在需要写hql语句,而是使用criteria对象的各种方法来实现. 1.查询所有 //使用QBC方式查询所有 @Test public void test11(){ ...
- rem单位怎么使用
rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...
- 开源解决方案一：快速搭建单机版 LAMP 网站
LAMP 通常表示 Linux + Apache + MySQL/MariaDB + Perl/PHP/Python,LAMP 的各个组件不是一成不变的,并不局限于它最初的选择.作为一个解决方案套件, ...
- vue.js开发之开关(switch)组件
最近开发组件的时候,自定义开发了开关(switch)组件,现将代码整理如下,方便日后复用. toggle-switch.vue <template> <label role=&quo ...
- 阿里云、青云、腾讯云服务器，Mysql数据库，Redis等产品性能对比
阿里云.青云.腾讯云服务器,Mysql数据库,Redis等产品都使用过,对比维度很多就不一一放出.直接放结论吧:买的腾讯(金融专区)服务器,Mysql(TDSql)把所有项目转到腾讯云,但是没有用腾讯 ...
- 在C++中实现类似Java的“synchronized”
我只是代码的搬运工,原文参见A "synchronized" statement for C++ like in Java.其实现是通过区域锁(Scoped locking)和宏定 ...
- 一、快速构建Springboot应用
1.基本概念 Spring的出现对于企业级应用来说是一个福音,它让企业级应用开发更加地简单.但是随着Spring的不断发展,它也慢慢变得越来越重.即使apache出品的maven工具能够使得项目创建. ...
- Python基础学习总结(三）
4.if语句 If语句可以检查判定当前条件,并执行相应措施. if a in A: if a 条件: 执行命令1 4 else: 执行命令2 if判断条件还可以简写 if x: print('True ...
- ecs CentOS 7 安装 mariadb
检查之前是否已经安装 rpm -qa | grep mariadb 如果已安装,卸载 yum remove mysql mysql-server mysql-libs compat-mysql51 开 ...
- PHP DES解密 对应Java SHA1PRNG方式加密
背景及问题 背景:在和外部系统通过HTTP方式跳转时, 为保障传输参数安全性, 采用AES 加密参数. 关于对称加密中 AES, DES, CBC, ECB, PKCS5Padding 概念可参考ht ...