网站导航滑块效果：

复制以下代码保存到html文件中即可查看效果...

<html>

<head>

    <title>JQ菜单滑块</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<style type="text/css">

		.nav{

			width:605px;

			height:50px;

			background-color:#999;

			position:relative;

		}

		.nav>ul{

			width:100%;

			height:100%;

			background-color:#177cb0;

			list-style:none;

			float:left;

			margin: 0;

			padding: 0;

		}

		.nav>ul>li{

			width:100px;

			height:50px;

			line-height:50px;

			float:left;

			background-color:#666;

			text-align:center;

			margin-left:1px;

                        color:#fff;

	        }

		.nav>ul>li:first-child{

			margin-left:0;

		}

		.fmove{

			width:100px;

			height:5px;

			position:absolute;

			z-index:10;

			left:0;

			bottom:0;

			background-color:blue;

		}

	</style>

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

</head>

<body>

    <div class="nav">

		<ul>

			<li>首页</li>

			<li>菜单1</li>

			<li>菜单2</li>

			<li>菜单3</li>

			<li>菜单4</li>

			<li>菜单5</li>

		</ul>

		<div class="fmove"></div>

	</div>

</body>

</html>

<script type="text/javascript">

    $(function () {

		var tt;

		$(".nav>ul>li").hover(function(){

			clearTimeout(tt);

			var lft = $(this).position().left;

			tt = setTimeout('$(".fmove").animate({left:' + lft + '})',450);

		});

        $(".nav").mouseleave(function(){

			clearTimeout(tt);

			tt = setTimeout('$(".fmove").animate({left:0})',650);

		});

    });

</script>

　　

JQ菜单滑块的更多相关文章

  1. jq菜单折叠效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 数据的随机抽取 及 jQuery补充效果（菜单、移动）

    一.数据的随机抽取 都见过那种考试题从很多题中随机抽取几道的试卷吧,现在就要做这样的一个例子:从数据库中随机抽取几条数据出来显示(例如:一百中随机挑选50条) 随机挑选是要有提交数据的,所以肯定是要有 ...

  3. JQ滑动导航菜单的实现

    前言:不多说直接看效果!!! 这样的菜单我们在一般的网站上见到的也比较多,有比较好的用户体验!   原理:这个很重要,任何的特效只要原理搞明白了,实现起来都是很容易的!这个特效的原理很简单,菜单的样式 ...

  4. jq倾斜的动画导航菜单

    效果预览网址:http://keleyi.com/keleyi/phtml/jqmenu/index.htm 支持IE.Chrome.火狐等浏览器 完整源代码,保存到HTML文件打开也可查看效果: & ...

  5. JQ写简单的伸缩菜单（内附效果图和源代码）

    效果如图: JQ代码就那么几句, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  6. html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架

    简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...

  7. 自写JQ控件-树状菜单控件[demo下载]

    一个多月没有写博客了,最近也弄一个基于JQ的树状菜单控件,在此分享给大家.另外呢,通过这个例子分享一下怎么写JQ控件的. 事实上工作中,也是经常遇到的,有些时候自己想实现一些前端效果,用网上一些插件吧 ...

  8. Jq写个联级菜单

    这个效果很好看,Jq很容易实现: $(document).ready(function(){ $('.menu li').hover(function(){ $(this).children('ul' ...

  9. 非常酷的jQuery/HTML5图片滑块特效 带弹性菜单

    新的一周刚刚开始,当我迷迷糊糊坐在办公桌前时,又不自主的去看了一些jQuery和HTML5的应用插件,今天我们来看一款非常酷的jQuery/HTML5图片滑块特效,这款插件的特点是图片上不错的弹性菜单 ...

随机推荐

  1. mysql批量查询

    一般批量查询的时候都是in关键字,但是在数据量大的时候,效率低下. 这个时候我们就可以考虑使用union . xml 核心代码 <select id="selectList" ...

  2. etcd 启动错误

    Apr 26 16:17:25 ceph-0 etcd: f281dc69fb4dd3d8 became candidate at term 3574Apr 26 16:17:25 ceph-0 et ...

  3. mongodb常用查询语句

    1.查询所有记录db.userInfo.find();相当于:select* from userInfo; 2.查询去掉后的当前聚集集合中的某列的重复数据db.userInfo.distinct(&q ...

  4. gulp插件实现压缩一个文件夹下不同目录下的js文件（支持es6）

    gulp-uglify:压缩js大小,只支持es5 安装: cnpm: cnpm i gulp-uglify -D yarn: yarn add gulp-uglify -D 使用: 代码实现1:压缩 ...

  5. JS的Date对象、Math、包装类

    Date对象 在JS使用Date对象来表示时间  当前时间 var d = new Date();  指定时间 格式:月/日/年 时:分:秒 var e = new Date("02/16/ ...

  6. openstack-ntp时间同步服务

    ntp时钟同步服务 NTP 工作请求 (1) 客户端将采用随机端口向 NTP 服务器 (UDP:123) 发出时间同步请求 (2)NTP 服务器收到请求后会将发出调校时间 (3)NTP 客户端接收到 ...

  7. xampp集成环境下重置mysql的密码

    第一步:打开两个命令行工具,都进入到你的xampp安装目录下的mysql下的bin目录,如我安装的位置是D:xampp/mysql/bin: 第二步:在完成第一步的情况下,输入:mysqld --sk ...

  8. JAVA-类方法与实例方法

    1.实例方法:一个方法如果不加static关键字,那么这个方法是实例方法.意思是他属于类的某个实例,通过这个实例调用它,对类的其他实例不产生影响. 2.类方法:也称静态方法.在方法前加static关键 ...

  9. Springboot 中配置文件的优先级和加载顺序

    1. 若application.yml 和bootStrap.yml 在同一目录下,则bootStrap.yml 的加载顺序要高于application.yml,即bootStrap.yml  会优先 ...

  10. centos7安装python，mariaDB，django，nginx

    0,安装centos7 centos默认不开启网卡,需要在安装时将ens33设置为on,或者后续通过vi ifcfg-ens33,找到onboot,设置为yes ssg登陆centos7时,如果提示W ...