html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>导航栏</title>

		<link rel="stylesheet" href="css/test.css" />

		<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>

		<script type="text/javascript" src="js/test.js" ></script>

	</head>

	<body>

		<div class="nav">

			<ul class="list">

				<li>

					<a href="#">

						<b>Home</b>

						<i>首页</i>

					</a>

				</li>

				<li>

					<a href="#">

						<b>Study</b>

						<i>学习</i>

					</a>

				</li>

				<li>

					<a href="#">

						<b>Coursr</b>

						<i>课程</i>

					</a>

				</li>

				<li>

					<a href="#">

						<b>Bbs</b>

						<i>论坛</i>

					</a>

				</li>

				<li>

					<a href="#">

						<b>About</b>

						<i>关于</i>

					</a>

				</li>

			</ul>

		</div>

	</body>

</html>

　　css

*{padding:0; margin:0;}

li{ list-style:none; }

a{ text-decoration:none;}

.nav{ width:100%; height:40px; background:#222; margin-top:100px; overflow:hidden;}

.list{ width:1000px; height:40px; margin:0 auto;}

.list li{ float:left;}

.list li a{ display:block; }

.list b,.list i{ display:block; padding:0 30px; color:#aaa; line-height:40px; text-align:center;}

.list b{ font-weight:100}

.list i{ font-style:normal; background:#333; color:#fff;}

　　js

$(document).ready(function() {

	$(".list a").hover(function() {

		$(this).stop().animate({

			"margin-top":-40

		},300)

	},function(){

		$(this).stop().animate({

			"margin-top":-40

	},300)

});

　　效果：

2017-09-23   12:42:54

jquery实现可以中英切换的导航条的更多相关文章

  1. css3 实现可以中英切换的导航条

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  2. JQuery Mobile+JS实现智能浮动定位导航条

    实现原理 主要用到几个知识点: 什么是scrollTop? CSS position定位 判断是否为IE6浏览器 元素相对于窗口的距离 原理:1,浏览器向下滚动时,当document的scrollTo ...

  3. 使用 jQuery 实现当前页面高亮显示的通栏导航条

    index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  4. jquery控制滚动条改变上面固定(fixed)导航条或者搜索框的属性

    <script type="text/javascript"> $(document).ready(function(){ $(window).scroll( func ...

  5. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  6. 基于jQuery滑动分步式进度导航条代码

    分享一款基于jQuery滑动分步式进度导航条代码.这是一款基于jquery实现的网站注册动态步骤导航条代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=& ...

  7. Win10 改为用 Ctrl+Shift 切换中英输入语言而不是 Win+空格

    是切换中英输入语言,而不是切换输入法,如图: 步骤: 设置 > 设备 > 输入 > 高级键盘设置 > 语言栏选项 > 高级键盘设置 > 更改按键顺序 > 切换 ...

  8. Jquery | 基础 | 导航条在项目中的应用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. webstorm快捷键 webstorm keymap内置快捷键英文翻译、中英对照说明

    20160114参考网络上的快捷键,整理自己常用的: 查找/代替shift+shift 快速搜索所有文件,简便ctrl+shift+N 通过文件名快速查找工程内的文件(必记)ctrl+shift+al ...

随机推荐

  1. zookeeper,通过python连接找出其对应的hive

    #通过zookpeer找到对应的hive from kazoo.client import KazooClient zkClient = KazooClient(hosts="ip1:218 ...

  2. cmd美化

    原本的cmd 虽然原本的cmd很简约黑底白字,但是看久了也会视觉疲劳 美化(丑化) 打开cmd右键头部选择属性 字体选项这里可以修改字体的大小和选择字体,修改之后下方会有预览,颜色选项这里点选屏幕文字 ...

  3. 回顾Servlet及SpringMVC

    什么是Servlet? Servlet是运行在Web服务器或应用服务器上的程序,它是作为来自Web浏览器或其他HTTP客户端的请求和HTTP服务器上的数据库 或应用程序之间的中间层. servlet架 ...

  4. 「树的直径」BFS方法证明

    选定任意一个点u,从u开始BFS求出距离u最大的点s,再从s点出发BFS到距离s最大的点t,则dis(s,t)即为树的直径 证明 其实只要找到了树的直径的一个端点,再BFS找到最远点就一定是直径的另一 ...

  5. HihoCoder - 1673 （单调队列)

    题目:https://vjudge.net/contest/319166#problem/A 题意:有一个01矩阵,求一个最大子矩阵面积,这个矩阵要求里面都是01间隔,没有0或1连续 思路:这个题其实 ...

  6. MySQL中truncate误操作后的数据恢复案例

    MySQL中truncate误操作后的数据恢复案例 这篇文章主要介绍了MySQL中truncate误操作后的数据恢复案例,主要是要从日志中定位到truncate操作的地方然后备份之前丢失的数据,需要的 ...

  7. Python学习笔记二--函数

    1.使用global语句定义全局变量 2.默认参数 默认参数值应该是不可变的.注意: 只有在形参表末尾的那些参数可以有默认参数值,即你不能在声明函数形参的时候,先声明有默认值的形参而后声明没有默认值的 ...

  8. DB-概念-数据库：数据库/Database

    ylbtech-DB-概念-数据库:数据库/Database 数据库是以一定方式储存在一起.能与多个用户共享.具有尽可能小的冗余度.与应用程序彼此独立的数据集合,可视为电子化的文件柜——存储电子文件的 ...

  9. 笔记：JFB 部署新环境，要更改的参数清单列表

    ylbtech-笔记:JFB 部署新环境,要更改的参数清单列表 1. Web.config返回顶部   2. JS返回顶部 1./m/js/utils.js var utils = {} 序号 参数 ...

  10. write(byte[] b, int off, int len)

    write(byte[] b, int off, int len)就是将数组 b 中的 len 个字节按顺序写入输出流. 所以如果 b 为 null,则抛出 NullPointerException. ...