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

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

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

html:

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题首页/title link rel='样式表href='./CSS/demo 2。CSS/head body div class=' nav ' ul class=' nav-list '阿利href='index.html '索引I首页/i /a /li阿利论坛/i /a /li阿利博客/i /a /li阿利商城/i /a /li阿利下载/I/a/Li/ul/div/body/html CSS :

* { margin :0 pxpadding :0 pxfont-family : '微软雅黑，Helvetica，无衬线，拉托；}李{列表式：无；} a { text-decoration : none}.nav { width :100%；高度： 40px背景色： # 222;页边距-顶部：100像素；飞越：隐藏；}.导航列表{宽度：1000像素；margin:0汽车高度： 40px}.导航列表li {左侧浮动：}.阿利区块导航表；transition: 0.2s }。导航列表李b .导航列表li i { color: # aaa线高： 40px显示器：块；padding:0 30px文本对齐：中心；}.导航列表Li b { font-weight :正常；}.导航列表li i{ font-style:正常；color: # fff背景色： # 333;}.导航列表阿利：悬停{边缘-顶部：-40px；}红色部分就是这个过程的实现，利用位置的变化，当鼠标移上去的时候，显示中文，也就是将英文移开，值得注意的是，需要利用飞越：隐藏属性，将其隐藏。如果想要速度慢一点的话，可以利用过渡属性设置变化时间，就可以减慢变化速度。

接着是用jquery实现：

css:

* { margin :0 pxpadding :0 pxfont-family : '微软雅黑，Helvetica，无衬线，拉托；}李{列表式：无；} a { text-decoration : none}.nav { width :100%；高度： 40px背景色： # 222;页边距-顶部：100像素；飞越：隐藏；}.导航列表{宽度：1000像素；margin:0汽车高度： 40px}.导航列表li {左侧浮动：}.阿利区块导航表；}.导航列表李b .导航列表li i { color: # aaa线高： 40px显示器：块；padding:0 30px文本对齐：中心；}.导航列表Li b { font-weight :正常；}.导航列表li i{ font-style:正常；color: # fff背景色： # 333;}jquery:

$(function(){ $(').导航列表阿利')。悬停(function(){ $(this)).停止()。animate({'margin-top':-40，200) }，function(){ $(this).停止()。动画({'margin-top':0}，200)})；});实现功能的重点是动画()函数的实现，通过设置上边距和时间实现，为了防止快速经过时，所有的都会变化（如下图所示),需要在动画()函数前面加上停止()函数，即在所有动画之前，先停止其他的动画，然后再开始这个动画。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。