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. javascript中数组元素删除方法splice，用在for循环中巨坑

    一.demo splice: 该方法会改变自动原始数组长度 实例: var array = ["aa","dd","cc","aa ...

  2. 用pycharm运行pytest

    安装pytest 1. 在pycharm中建项目,建文件,文件名字要以test_开头 2.在文件中插入pytest模块 import pytest #引用pytest模块 3.定义test函数,以及断 ...

  3. Python lambda 多变量

    >> x = list(map(lambda x, y: (x>3, y>0), (1,2,3,4,5), (0,1,2,3,4)))>>> x[(False ...

  4. hive中Sort By，Order By，Cluster By，Distribute By，Group By的区别

    order by:  hive中的order by 和传统sql中的order by 一样,对数据做全局排序,加上排序,会新启动一个job进行排序,会把所有数据放到同一个reduce中进行处理,不管数 ...

  5. 423 Locked

    TortoiseSVN提交提示423 Locked的解决办法 . 此办法是阅读官方文档(TortoiseSVN-1.6.16-zh_CN.pdf) 4.21 锁部分提供的办法: 首先选择选择要提交的文 ...

  6. Git项目实战篇

    版本控制器:Git # 达到多人协同开发的目的 安装 """1.下载对应版本:https://git-scm.com/download2.安装git:在选取安装路径的下一 ...

  7. 同源策略和跨域资源共享（CROS）

    同源策略 Same-origin policy - Web security | MDN 跨站资源共享 Cross-Origin Resource Sharing (CORS) - HTTP | MD ...

  8. 异常的处理try-catch

    Java异常处理 Java采用的异常处理机制,是将异常处理的程序代码集中在一起, 与正常的程序代码分开,使得程序简洁.优雅,并易于维护. * 异常的处理: 抓抛模型*** 过程一 : 抛, 程序在执行 ...

  9. ASP.NET Core MVC/WebAPi 模型绑定探索 转载https://www.cnblogs.com/CreateMyself/p/6246977.html

    前言 相信一直关注我的园友都知道,我写的博文都没有特别枯燥理论性的东西,主要是当每开启一门新的技术之旅时,刚开始就直接去看底层实现原理,第一会感觉索然无味,第二也不明白到底为何要这样做,所以只有当你用 ...

  10. ASP.NET MVC学习系列(二)-WebAPI请求 转载https://www.cnblogs.com/babycool/p/3922738.html

    继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现 ...