jquery 滑块导航菜单
带滑块的导航菜单，鼠标悬浮时，滑块会移动至鼠标位置，离开时，滑块会回到原来的位置，点击菜单之后滑块会停留在被点击菜单位置，等待下一次的鼠标悬浮事件或者点击事件，效果图：
图片效果不行，直接上代码：
<body>
<div class="nav">
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
<span>ddd</span>
<div class="nav_bj"></div>
</div>
</body>
.nav{
width:1000px;
text-align:center;
background:#666666;
margin:0 auto;
position:relative;
}
.nav span{
width:250px;
height:41px;
line-height:41px;
display:inline-block;
position:relative;
z-index:;
color:#FFF;
cursor:pointer;
}
.nav_bj{
background:#0099FF;
width:250px;
height:41px;
position:absolute;
top:;
z-index:;
left:0px;
}
$(function(){
var x,re,nowX;
nowX = 0;
$(".nav span").mouseover(function(){
x=$(this).position().left;
$(".nav_bj").animate({left:x})
clearTimeout(re);
}).mouseout(function(){
clearTimeout(re);
re=setTimeout(function(){
$(".nav_bj").animate({left:nowX})
},500);
});
$(".nav span").click(function(){
nowX = $(this).position().left;
$(".nav_bj").css("left",nowX);
});
})
需要引用 jQuery ，这种导航条和淘宝已买到的宝贝如出一辙，可用相似方式实现。
jquery 滑块导航菜单的更多相关文章
- jQuery弹性滑动导航菜单实现思路及代码
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...
- jQuery滑动导航菜单
js: $(function(){ $("ul.sub").parent().append("<span></span>"); $(&q ...
- JQuery 实现导航菜单的高亮显示
需求是这样的 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 网上说的思路是这样的: 在菜单层的 ...
- jquery 树形导航菜单无限级
转自:http://www.jb51.net/article/71615.htm 侵删<!DOCTYPE html> <html lang="en"> &l ...
- jquery水平导航菜单展示
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery之导航菜单（点击该父节点时子节点显示，同时子节点的同级隐藏，但是同级的父节点始终显示）
注:对于同一个对象不超过3个操作的,可直接写成一行,超 过3个操作的建议每行写一个操作.这样可读性较强,可提高代码的可读性和可维护性 核心代码: $(".has_children" ...
- jQuery 浮动导航菜单（购物网站商品类型）
单页面网页内容较多,页面长度较大,需要方便快速的在页面的不同位置进行定位,所以浮动菜单逐渐流行了起来,如下图 男装.女装.美妆等. 这种菜单功能分为两部分: 1.点击菜单项,网页滚动到对应位置,可简单 ...
- 30个实用的jQuery选项卡/导航教程推荐
很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...
- 可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...
随机推荐
- P4332 [SHOI2014]三叉神经树
\(\color{#0066ff}{ 题目描述 }\) 计算神经学作为新兴的交叉学科近些年来一直是学术界的热点.一种叫做SHOI 的神经组织因为其和近日发现的化合物 SHTSC 的密切联系引起了人们的 ...
- C语言中结构、联合、枚举的说明
复杂的数据类型 一般的步骤: 1.声明模板 2.定义变量,分配内存空间 3.初始化 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...
- P2925 [USACO08DEC]干草出售Hay For Sale
传送门 把每体积的干草价值看成一,就变成求最大价值 直接上背包就行了 注意优化常数 #include<iostream> #include<cstdio> #include&l ...
- Oracle 树形SQL语句,SYS_CONNECT_BY_PATH 函数
转一个SYS_CONNECT_BY_PATH 函数的例子.推断原表应该是这样: Child Parent ------------------------ ...
- Python数据分析之pandas学习(基础操作)
一.pandas数据结构介绍 在pandas中有两类非常重要的数据结构,即序列Series和数据框DataFrame.Series类似于numpy中的一维数组,除了通吃一维数组可用的函数或方法,而且其 ...
- linux虚拟机管理
1.虚拟机管理命令virsh-manager ##开启虚拟机管理器 virsh list ##显示正在运行的虚拟机virsh list --all ##查看所 ...
- Python练习六十：网页分析，找出里面的正文与链接
网页分析,找出里面的正文与链接 代码如下: from urllib import request from bs4 import BeautifulSoup request = request.url ...
- Problem01 不死神兔
题目:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子对数为多少? 程序分析:兔子的规律为数列1,1,2,3,5,8,13,21 ...
- yii2下的路由重写
1.在config/main.php中添加配置信息 文件位置如图所示(图中展示的是backend下的config,也可以在fronted和common的config中添加) 配置的代码标准格式如下 ' ...
- Vue.js-----轻量高效的MVVM框架（二、Vue.js的简单入门）
1.hello vue.js! (1)引入vue.js <script type="text/javascript" src="js/vue.js"> ...