网站导航滑块效果：

复制以下代码保存到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. Jquery小功能实例

    下拉框内容选中左右移动 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sele ...

  2. mysql和oracle分页查询

    MYSQL分页查询 方式1: select * from table order by id limit m, n; 该语句的意思为,查询m+n条记录,去掉前m条,返回后n条记录.无疑该查询能够实现分 ...

  3. bind 小测试

    #测试其他功能临时搭建测试 主配置文件: [root@localhost named]# cat /etc/named.conf // // named.conf // // Provided by ...

  4. Servlet3.0与springmvc那些事

    官方文档:https://docs.spring.io/spring/docs/5.0.2.RELEASE/spring-framework-reference/web.html#mvc-servle ...

  5. PHP内核深入研究 - 数组及其遍历顺序

    事实上,广义上来讲,PHP就是C语言应用在Web上的一个模板,PHP中smarty模板用得比较多,就好比JSP是Java Servlet的模板一样(喔,对了,JSP中有个JSTL标签),复杂的模板语法 ...

  6. Leaflet获取可视范围内4个顶点

    //地图级别改变时发生 map.on("zoomend", function (e) { var zoom_val = e.target.getZoom(); map_drag() ...

  7. ORA-28002密码失效问题解决

    问题:提示ORA-28002解决: 第1种方法:数据库级别,需要重启查看过期时间: sql>SELECT * FROM dba_profiles WHERE profile='DEFAULT' ...

  8. js--深拷贝与浅拷贝

    对象:只针对于Object和Array这样的引用数据类型 说明:浅拷贝只复制指向某个对象的指针,而不是复制对象的本身,新旧对象还是共享一块内存.但深拷贝会另外创造一个一模一样的对象,新的对象跟原对象不 ...

  9. Java基础学习-Eclipse综述和运算符的使用

    1.Eclipse的概述(磨刀不误砍柴工)       -Eclipse是一个IDE(集成开发环境)         -IDE(Intergrated Development Environment) ...

  10. LINQ更新提示找不到行或行已更改的解决一例

    LINQ对一行数据进行更改,怎么都无法提交,所有字段值都不是空值,后来看了实体,我发现更改的数据是主键,去数据库看这个字段却不是主键,原来是数据库取消主键了,实体代码没取消,因为更改了主键,所以无法更 ...