基于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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
setAttribute 与 class冲突解决
Feb 17 Javascript
Jquery常用技巧收集整理篇
Nov 14 Javascript
Web开发之JavaScript
Mar 29 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
写一个Vue Popup组件
Feb 25 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
react 项目中引入图片的几种方式
Jun 02 Javascript
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 Javascript
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
phpinfo 系统查看参数函数代码
2009/06/05 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
javascript 一些用法小结
2009/09/11 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
js排序与重组的实例讲解
2017/08/28 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
python实现ping的方法
2015/07/06 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
python绘制封闭多边形教程
2020/02/18 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
django model通过字典更新数据实例
2020/04/01 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
海淘母婴商城:国际妈咪
2016/07/23 全球购物
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
团员学习总结的自我评价范文
2013/10/14 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
委托书英文
2015/01/28 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android