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. spring @Query使用对象参数

    @Transactional @Modifying @Query(value = "UPDATE az_news a SET a.news_content =:#{#news.newsCon ...

  2. 常用jstl

    求list中某一值的和 <c:set var="total" value="${0}" /> <c:forEach var="tLi ...

  3. 【leetcode】820. Short Encoding of Words

    题目如下: 解题思路:本题考查就是找出一个单词是不是另外一个单词的后缀,如果是的话,就可以Short Encode.所以,我们可以把words中每个单词倒置后排序,然后遍历数组,每个元素只要和其后面相 ...

  4. window安装oracle和创建数据库

    原文地址: https://www.cnblogs.com/hoobey/p/6010804.html  #11g安装 https://www.cnblogs.com/qq1272850043/p/6 ...

  5. 禁止多用户进入win7系统的方法（图文）

    windows7系统可以支持多用户登陆,虽然它能为使用者提供方便,但是为安全起见,一些用户想要禁止多用户进入win7系统,因为我们并不能保证其他账户用户在使用过程中是否会安装病毒程序.那么如何禁止多用 ...

  6. js练习题之图片背景轮播

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. 【SpingBoot】 测试如何使用SpringBoot搭建一个简单后台1

    很久没写博客了,最近接到一个组内的测试开发任务是做一个使用SpringBoot 开发一个后台程序(还未完成),特写感想记录一下 1. 为什么选择SpringBoot ? 首先是目前很多公司的后台还是J ...

  8. Ubuntu安装 docker

    安装docker首先要需要一台宿主机, 我目前用VMvare下安装的Ubuntu16.04系统为宿主机,进行docker安装测试. ubuntu安装时选的中文环境,生成的sources.list里面的 ...

  9. idea下web工程的编译和输出设置

    公司的一个项目,别人用的eclipse,我这边用IDEA,路径上出了点问题,现在大概有点头绪了,记录下来. 打开project structure后,看到如下设置,最重要的是Modules和Artif ...

  10. 测开之路三十：Flask基础之jinja2模板继承

    实现某些位置的内容固定,某些位置的内容动态展示,如: 中文文档地址:http://docs.jinkan.org/docs/jinja2/templates.html#template-inherit ...