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 ...
随机推荐
- USACO 1.3.6 Ski Course Design[滑雪课程设计]
先说说思路: 这题比上一道坑人的wormholes简单多了!我一看到这题,“XXX设计”,还以为要用到什么dp呢,没想到是水题 用两层循环,第一层循环相差17中的上界,第二层遍历所有的山峰计算答案.并 ...
- iperf简单说明
1.官网下载安装包 https://iperf.fr/iperf-download.php 2.安装(根据下载包的类型进行安装) 3.参数说明服务端(默认监听端口5201) iperf -s -u - ...
- visual studio 2013 error: Page '312e8a59-2712-48a1-863e-0ef4e67961fc' not found.
In order to resolve this error do the following : Open Developer Command Prompt for VS 2013 as “Run ...
- 江西财经大学第一届程序设计竞赛 D
链接:https://www.nowcoder.com/acm/contest/115/D来源:牛客网 题目描述 事情,是这样的. 有这么一天双休日的中午. 我刚把我衣服扔进了洗衣机,然后拿了个小板凳 ...
- NAS与SAN RAID
存储区域网络 SAN 存储区域网络(Storage Area Network,简称SAN)采用网状通道(Fibre Channel ,简称FC,区别与Fiber Channel光纤通道)技术,通过FC ...
- hdu1028 Ignatius and the Princess III(递归、DP)
Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ...
- Connection closing...Socket close. Connection closed by foreign host. Disconnected from remote host(centos6.9) at 14:59:05.
查找网上资料解决方法如下 [root@localhost ssh]# service sshd start Starting sshd: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...
- 性能测试工具Jmeter02-安装配置
安装配置 1.安装配置jdk 2.Jmeter下载地址:http://mirror.bit.edu.cn/apache/jmeter/binaries/ 下载后,解压文件到任意目录,避免在一个有空格的 ...
- Castle.DynamicProxy的使用
.Net平台AOP技术研究 简单实现 通过继承实现 public interface ICoding { void DoSth(); } public class Coding : ICoding { ...
- DEDE利用Ajax实现调用当前登录会员的信息简要说明
其实这个功能在dede默认的模板上就有,只能算是在原有的功能上进行改造而已. 1.首先需要加载一个ajax的js文件进来 <script language="javascript&qu ...