网站导航滑块效果：

复制以下代码保存到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. SNMP理解

    前两天项目要求一个附加功能,远程监视服务器的运行状况,要定期监视指定端口,指定业务,还包括服务器的磁盘空间,内存,CPU使用率等等.这头俩事还好说,ping和telnet也就搞定了,实在不行就开个so ...

  2. LightGBM算法（转载）

    原文:https://blog.csdn.net/niaolianjiulin/article/details/76584785 前者的含义是轻量级,GBM:梯度上升机. 相较于xgboost: 更快 ...

  3. jmeter的新增函数说明

    本文算是对<零成本实现Web性能测试:基于Apache JMeter>中的<详解JMeter函数和变量>进行狗尾续貂哈,因为最近版本的jmeter增加了几个新函数,在原书中没有 ...

  4. Git_GitHub-使用过程遇到的问题——坑（持续添加）

    push错误——>master git push -u origin master 最后找到解决办法如下: 1.先删除远程 Git 仓库 $ git remote rm origin 2.再添加 ...

  5. Spring cloud Greenwich Eureka

    1.父工程POM文件中: <dependencyManagement> <dependencies> <!--spring cloud--> <depende ...

  6. jenkins 构建nodejs-pipeline流水风格的任务

    Step3 上图代码如下 node("master"){ //warp([$class:'BuildUser']) {BUILD_USER = BUILD_USER} GIT_NA ...

  7. 查看mysql中sql语句执行时间

    查看mysql版本:select version();方法一: show profiles.1. Show profiles是5.0.37之后添加的,要想使用此功能,要确保版本在5.0.37之后.  ...

  8. APIO 2014 回文串（Manacher+后缀自动机+倍增）

    题意 https://www.lydsy.com/JudgeOnline/problem.php?id=3676 思路 好像还是回文自动机裸体,但是 \(\text{Manacher}\) +后缀自动 ...

  9. python链接mysql获得某列最大值

    import pymysqlconn = pymysql.connect(host='10.1.2.198', port= 3306 ,user='root',passwd='123456',db=' ...

  10. robot framework---校验新增条数功能

    check总条数验证 [Arguments] ${beforevalue} ${endvalue} ${value} ${a} Evaluate '${beforevalue}'.replace('共 ...