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 ...
随机推荐
- pycharm加开头注释
选择 File and Code Templates -> Files -> Python Script #!/usr/bin/env python # encoding: utf-8 ' ...
- java编程技巧和心得
1.在一个类中修改或调用另一个类的变量: 只需要将该变量用public static 这个修饰符修饰,再用类名直接调用即可 2.实现对只有下标不同变量的操作 解决思路:可以将这些变量放在一个数组里,在 ...
- Django 05 自定义过滤器、自定义标签
Django 05 自定义过滤器.自定义标签 一.自定义过滤器 #1.在项目目录下创建一个python package包 取名为common(这个名字可以自定义) #2.在common目录下创建一个t ...
- pre 标签 防止 其撑开 div...
pre 里面 的内容如果不换行,会导致 div 横向 出现 滚动条...加入下列 css可解决! pre{ white-space: pre-wrap; word-wrap: break-word; ...
- Pandas基本功能详解
Pandas基本功能详解 Pandas Pandas基本功能详解 |轻松玩转Pandas(2) 参考:Pandas基本功能详解 |轻松玩转Pandas(2)
- python 函数调用
##########定义函数######### 如果不主动调用函数,函数是不会执行的 def say_hello(): print 'hello1' print 'hello2' ...
- my24_mysql索引-使用篇
索引提示 SELECT * FROM table1 USE INDEX (col1_index,col2_index) ; SELECT * FROM table1 IGNORE INDEX (col ...
- math.random()方法的使用
一:导言 以前总是被数字的范围正则搞的头大,在此总结了一下 二:用法 Math.random()函数返回0和1之间的伪随机数,可能为0,但总是小于1,[0,1) 生成n-m,包含n但不包含m的整数: ...
- inventor安装不了
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
- 第8章 IO类
8.1 IO类 iostream istream, wistream从流中读取数据 ostream, wostream iostream, wiostream读写 ...