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 ...
随机推荐
- 最短路【bzoj1726】: [Usaco2006 Nov]Roadblocks第二短路
1726: [Usaco2006 Nov]Roadblocks第二短路 Description 贝茜把家搬到了一个小农场,但她常常回到FJ的农场去拜访她的朋友.贝茜很喜欢路边的风景,不想那么快地结束她 ...
- Arch下systemd无法开机执行rc.local之解决方法
早就发现了,Arch的systemd提供的那个 rc-local.service 貌似有问题,rc.local不会执行.因为没用rc.local,一直没管. 解决方法源自这里,需要稍加改动: http ...
- Eclipse导入GitHub项目两处报错处理
1.项目出现Could not calculate build plan:pligin 错误解决办法: 删除本地.m2仓库中 org.apache.maven.plugins:maven-resour ...
- DataSet强类型、TableAdapter的使用
简答使用可以看https://www.cnblogs.com/namejr/p/10411920.html中的"先来简单介绍dataset和datatable" DataSet强类 ...
- 1. mybatis 的入门实例
mybatis 的入门实例 1.创建一个普通的Java项目 1.加入jar包(所有mybatis 和mysql) 2.加入配置文件 src 目录下 (1) db.properties mysql.us ...
- matplotlib学习笔记（四）
利用matplotlib可以显示图像 imread()和imshow()提供了简单的图像载入和显示功能. img = plt.imread("xxx.jpg") imread()可 ...
- POJ1054 The Troublesome Frog
题目来源:http://poj.org/problem?id=1054 题目大意: 有一种青蛙在晚上经过一片稻田,在庄稼上跳跃,会把庄稼压弯.这让农民很苦恼.我们希望通过分析青蛙跳跃的路径,找出对稻田 ...
- P3272 [SCOI2011]地板（插头DP）
[题面链接] https://www.luogu.org/problemnew/show/P3272 [题目描述] 有一个矩阵,有些点必须放,有些点不能放,用一些L型的图形放满,求方案数 [题解] ( ...
- C#面试题-递归
有一组数1.1.2.3.5.8.13.21.34...,求第n个数是多少? public int Recursion (int n){ ){ ; } &&n<=){ ; } )+ ...
- 惠普台式机在UEFI BIOS设置通电自动开机 影响电脑自动重启关不了机设置
设置通电自动开机 影响电脑自动重启关不了机设置 惠普台式机在UEFI BIOS中 1. 开机时不断点击F10键进入BIOS,选择Advanced(高级)然后选择Boot Options,点击回车 ...