基于jQuery实现中英文切换导航条效果


Posted in Javascript onSeptember 18, 2016

先来看一下中英文切换的导航条效果图:

基于jQuery实现中英文切换导航条效果

我采用了两种方式实现,一种用css3,另一种是用jquery实现。

首先说一下用css3如何实现:

html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>首页</title>
 <link rel="stylesheet" href="../css/demo2.css">
</head>
<body>
 <div class="nav">
 <ul class="nav-list">
 <li>
 <a href="index.html">
 <b>index</b>
 <i>首页</i>
 </a>
 </li>
 <li>
 <a href="index.html">
 <b>bbs</b>
 <i>论坛</i>
 </a>
 </li>
 <li>
 <a href="index.html">
 <b>blog</b>
 <i>博客</i>
 </a>
 </li>
 <li>
 <a href="index.html">
 <b>mall</b>
 <i>商城</i>
 </a>
 </li>
 <li>
 <a href="index.html">
 <b>download</b>
 <i>下载</i>
 </a>
 </li>
 </ul>
 </div>
</body>
</html>

css:

*{
 margin:0px;
 padding:0px;
 font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
li{
 list-style: none;
}
a{
 text-decoration: none;
}
.nav{
 width:100%;
 height: 40px;
 background-color: #222;
 margin-top:100px;
 overflow: hidden;
}
.nav-list{
 width:1000px;
 margin:0 auto;
 height: 40px;
}
.nav-list li {
 float: left;
}
.nav-list li a{
 display: block;
 transition: 0.2s;
}
.nav-list li b,.nav-list li i{
 color:#aaa;
 line-height: 40px;
 display: block;
 padding:0 30px;
 text-align: center;
}
.nav-list li b{
 font-weight:normal;
}
.nav-list li i{
 font-style: normal;
 color:#fff;
 background-color: #333;
}
.nav-list li a:hover{
 margin-top:-40px;
}

红色部分就是这个过程的实现,利用位置的变化,当鼠标移上去的时候,显示中文,也就是将英文移开,值得注意的是,需要利用overflow:hidden属性,将其隐藏。如果想要速度慢一点的话,可以利用transition属性设置变化时间,就可以减慢变化速度。

接着是用jquery实现:

css:

*{
 margin:0px;
 padding:0px;
 font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
li{
 list-style: none;
}
a{
 text-decoration: none;
}
.nav{
 width:100%;
 height: 40px;
 background-color: #222;
 margin-top:100px;
 overflow: hidden;
}
.nav-list{
 width:1000px;
 margin:0 auto;
 height: 40px;
}
.nav-list li {
 float: left;
}
.nav-list li a{
 display: block;
}
.nav-list li b,.nav-list li i{
 color:#aaa;
 line-height: 40px;
 display: block;
 padding:0 30px;
 text-align: center;
}
.nav-list li b{
 font-weight:normal;
}
.nav-list li i{
 font-style: normal;
 color:#fff;
 background-color: #333;
}

jquery:

$(function(){
 $(".nav-list li a").hover(function(){
 $(this).stop().animate({"margin-top":-40},200)
 },function(){
 $(this).stop().animate({"margin-top":0},200)
 });
});

实现功能的重点是animate()函数的实现,通过设置margin-top和时间实现,为了防止快速经过时,所有的都会变化(如下图所示),需要在animate()函数前面加上stop()函数,即在所有动画之前,先停止其他的动画,然后再开始这个动画。

基于jQuery实现中英文切换导航条效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
常用DOM整理
Jun 16 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
jQuery EasyUI常用数据验证汇总
Sep 18 #Javascript
jQuery EasyUI封装简化操作
Sep 18 #Javascript
基于jQuery ligerUI实现分页样式
Sep 18 #Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 #Javascript
JQuery控制DIV的选取实现方法
Sep 18 #Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 #Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 #Javascript
You might like
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
python字典DICT类型合并详解
2017/08/17 Python
python模拟事件触发机制详解
2018/01/19 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
Django密码系统实现过程详解
2019/07/19 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
How TDD works
2012/09/30 面试题
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
岗位职责的定义
2013/11/10 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
大学生求职信怎么写
2015/03/19 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
Golang入门之计时器
2022/05/04 Golang