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的特性: 使块元素在一行显示 使内嵌支持宽高 换行被解析了(问题) 不设置宽度的时候,宽度由内容撑 ...
随机推荐
- 【转】.NET 4.5 使用async和await关键字调用异步方法
async和await关键字是.NET 4.5新增加的异步编程方式,通过使用这两个关键字可以轻松便捷的编写异步方法.使用async关键字声明异步方法,使用await关键字等待和获取异步方法返回的结果. ...
- [android] 界面切换的简单动画
1. 新建个位移动画的xml文件 Activity中开启动画 使用AnimationUtils类加载动画资源文件 left_to_right.xml <?xml version="1. ...
- [Erlang]各种系统限制总结
Erlang本身对进程数,原子长度等没有限制,但为了提高性能和节省内存,总会在实际实现中和运行环境中作出一些限制. 1.进程数量 缺省情况下同时存在的最大Erlang进程数量不超过2^18=26214 ...
- Navicat 连接MySQL 8.0.11 出现2059错误
错误 使用Navicat Premium 连接MySQL时出现如下错误: 原因 mysql8 之前的版本中加密规则是mysql_native_password,而在mysql8之后,加密规则是cach ...
- Oracle 数据库字典 sys.obj$ 表中关于type#的解释
sys.obj$ 表是oracle 数据库字典表中的对象基础表,所有对象都在该表中有记录,其中type#字段表明对象类型,比如有一个表 test ,则该对象在sys.obj$ 中存在一条记录,name ...
- 缓存与DB数据一致性问题解决的几个思路
使用缓存必然会碰到缓存跟真实数据不一致的问题,虽然我们会在数据发生变化时通知缓存,但是这个延迟时间内必然会导致数据不一致,如何解决一般有下面几个思路: 首先,当这个延迟如果在业务上时可以接受的,比如文 ...
- 基于easyUI实现权限管理系统（二）——菜单导航
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 相关文件介绍 1. menu.jsp:菜单导航主界面 <!DOCTYPE html PUBLIC "-//W ...
- poj 3260 最少硬币（01+多重+完全背包）
http://www.cnblogs.com/ACMan/archive/2012/08/14/2637437.html #include <iostream> #include < ...
- H5前端的关于像素解释
场景: 人物:前端实习生「阿树」与 切图工程师「玉凤」 事件:设计师出设计稿,前端实现页面 玉凤:树,设计稿发给你啦,差那么点像素,就叼死你┏( ￣へ￣)=☞ 阿树:~(>_<)~毛问题噶 ...
- 警告: The web application [ROOT] appears to have started a thread named [Thread-48] but has failed to stop it. This is very likely to create a memory leak. Stack trace of thread:
1. 问题描述 tomcat跑web项目(其中依赖java项目) 出现大量上述警告 项目起不来 关键字 memory leak 内存泄漏 2. 解决方案 难道是程序写的有问题? 最终 将tomcat ...