网站导航滑块效果：

复制以下代码保存到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. Java初始化块

    1.使用初始化块 [修饰符]{ //初始化块的可执行性代码 } 初始化块虽然也是Java类的一种成员,但它没有名字,也就没有标识,因此无法通过类.对象来调用初始化块.初始化块只在创建Java对象时隐式 ...

  2. Python中自定义filter用法

    django中新建项目,在项目中新建app,自定义filter一般放到app中.结构目录如下: 1.先在APP中新建一个templatetags的django文件夹,文件夹中新建一个filter的py ...

  3. day 06

    深浅拷贝 # 值拷贝:应用场景最多ls = [1, 'abc', [10]]​ls1 = ls  # ls1直接将ls中存放的地址拿过来# ls内部的值发生任何变化,ls1都会随之变化​ls2 = l ...

  4. spring-data-jpa中save不触发数据库insert语句的问题

    最近学习spring mvc,用到jpa简化DAO层代码,发现save死活不触发SQL语句,找了好久才解决这个问题,实在是坑.. <!-- 关键是这个bean,一定要设置正确才行 --> ...

  5. Centos7通过SSH使用密钥实现免密登录

    日常开发中,难免会有登录服务器的操作,而通过ssh方式登录无疑是比较方便的一种方式. 如果登录较频繁,使用密钥实现免密登录无疑更是方便中的方便.因此本文就简单说一说如何实现免密登录. 一.安装配置ss ...

  6. Hessian序列化的一个潜在问题

    一. 最近的用rpc框架的时候,当用hessian序列化对象是一个对象继承另外一个对象的时候,当一个属性在子类和有一个相同属性的时候,反序列化后子类属性总是为null. 二. 示例代码: DTO对象 ...

  7. MySQL之 视图，触发器，存储过程，函数，事物，数据库锁，数据库备份

    1.视图 视图: 是一个虚拟表,其内容由查询定义: 视图有如下特点;  1. 视图的列可以来自不同的表,是表的抽象和逻辑意义上建立的新关系.  2. 视图是由基本表(实表)产生的表(虚表).  3. ...

  8. 编码原则 之 Once and Only Once

    原文 The Once and Only Once principle can be thought of as a subset of the Don’t Repeat Yourself princ ...

  9. Linear Regression with machine learning methods

    Ha, it's English time, let's spend a few minutes to learn a simple machine learning example in a sim ...

  10. 【python 3】 字符串方法操作汇总

    基础数据类型:str 1.1  字符串大小写转换 所有字母大写 : string.upper() 所有字母小写 : string. lower() 第一个单词的第一个字母大写,其他字母小写 :  st ...