带滑块的导航菜单，鼠标悬浮时，滑块会移动至鼠标位置，离开时，滑块会回到原来的位置，点击菜单之后滑块会停留在被点击菜单位置，等待下一次的鼠标悬浮事件或者点击事件，效果图：

图片效果不行，直接上代码：

<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 滑块导航菜单的更多相关文章

  1. jQuery弹性滑动导航菜单实现思路及代码

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...

  2. jQuery滑动导航菜单

    js: $(function(){ $("ul.sub").parent().append("<span></span>"); $(&q ...

  3. JQuery 实现导航菜单的高亮显示

    需求是这样的 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 网上说的思路是这样的: 在菜单层的 ...

  4. jquery 树形导航菜单无限级

    转自:http://www.jb51.net/article/71615.htm 侵删<!DOCTYPE html> <html lang="en"> &l ...

  5. jquery水平导航菜单展示

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQuery之导航菜单（点击该父节点时子节点显示，同时子节点的同级隐藏，但是同级的父节点始终显示）

    注:对于同一个对象不超过3个操作的,可直接写成一行,超 过3个操作的建议每行写一个操作.这样可读性较强,可提高代码的可读性和可维护性 核心代码: $(".has_children" ...

  7. jQuery 浮动导航菜单（购物网站商品类型）

    单页面网页内容较多,页面长度较大,需要方便快速的在页面的不同位置进行定位,所以浮动菜单逐渐流行了起来,如下图 男装.女装.美妆等. 这种菜单功能分为两部分: 1.点击菜单项,网页滚动到对应位置,可简单 ...

  8. 30个实用的jQuery选项卡/导航教程推荐

    很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...

  9. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

随机推荐

  1. kuangbin专题十二 HDU1078 FatMouse and Cheese ）(dp + dfs 记忆化搜索)

    FatMouse and Cheese Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  2. POJ1060 Modular multiplication of polynomials

    题目来源:http://poj.org/problem?id=1060 题目大意: 考虑系数为0和1的多项式.两个多项式的加法可以通过把相应次数项的系数相加而实现.但此处我们用模2加法来计算系数之和. ...

  3. Python-Anaconda练习candy算子用于边缘提取，再用hough变换检测直线边缘

    img: 待检测的图像. threshold: 阈值,可先项,默认为10 line_length: 检测的最短线条长度,默认为50 line_gap: 线条间的最大间隙.增大这个值可以合并破碎的线条. ...

  4. Autel MaxiSys MS908CV Diagnostic System for Commercial Vehicles

    As a new member of Autel’s MaxiSys family, the MaxiSys CV is built on the powerful MaxiSys 908 platf ...

  5. linux下重启php服务

    有时候修改了一些php配置或者进程满了需要重启php [root@snoopy :: bin]# service php-fpm restart Gracefully shutting down ph ...

  6. 《mac的git安装手册-1》

    <mac的git安装手册-1> 下载地址 https://git-scm.com/downloads 如果遇到上面这个问题打开系统偏好设置: OK,这样就能安装了

  7. pgadmin-linux-centos7.3-连接pgsql

    每次远程连接linux-centos上面的pgsql的时候,需要修改ip,命令如下: -->cd /var/lib/pgsql/data -->vi pg_hba.conf 添加ip如下, ...

  8. PS使模糊图片变清晰

    操作步骤 \(文件\)

  9. 命令行模式运行jmeter,主从方式运行jmeter

    jmeter很小,很快,使用方便,可以在界面运行,可以命令行运行.简单介绍下命令行运行的方式: sh jmeter.sh -n -t my-script.jmx -R 10.6.5.31,10.6.5 ...

  10. 不要滥用SharedPreference

    SharedPreference是Android上一种非常易用的轻量级存储方式,由于其API及其友好,得到了很多很多开发者的青睐.但是,SharedPreference并不是万能的,如果把它用在不合适 ...