基于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()函数，即在所有动画之前，先停止其他的动画，然后再开始这个动画。

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

赞 (0)

相关推荐

  • js判断字符长度以及中英文数字等

    js判断字符长度以及中英文数字等

    核心函数: 复制代码 代码如下: <script type="text/javascript"> var zfl={}; zfl.GetLength = function(str){ var realLength = 0,len = str.length,charCode = -1; for(var i=0;i<len;i++){ charCode = str.charCodeAt(i); if(charCode>0 && charCode<

  • js截取固定长度的中英文字符的简单实例

    js虽然提供了计算字符串所占字节数的函数,但是却不能正确计算汉字所占的字节数,如document.form1.username.value="我是中国人",document.form1.username.value.length返回的是5而不是10,于是给编程时带来一些麻烦,如限制固定长度字符的输入,截取固定长度的字符串都因为这个问题达不到预想的效果,下面是自己写的一个简单的函数,用于截取固定长度的字符串,中英文都适用.若有不妥之处还请高手指正! 复制代码 代码如下: //js截取字符

  • php 中英文语言转换类代码

    起初想到制成XML文档形式,这样操作也起来很容易.只是看到说XML效率不怎样 再者就是不同的模板,可这样也有个小问题,有些词汇比如时间提示是不确定,与可能是minute ,day.也有可能复数加 s 那好吧,做成数组,可数组就得做成在php文件的变量,很难做些扩展(我所知道所认为的是这样) 最后做成txt文本文件的形式,同样也为这样的效率担心,打开文件,搜索字符串,截取字符串这些,所幸最后运行了一下,一般机子大概0.0004秒,这让我很惊奇原以为会很慢,毕竟要调用多次. 好吧,上代码 复制代码

  • java实现十六进制字符unicode与中英文转换示例

    关于unicode和utf的关系,可以简单的记忆:Unicode是一个编码组织.一个编码规范.在java中指utf-16:utf是Unicode编码的translation转换格式,以便于很好地在网络中传递.在存储媒介汇总保存,于是utf存在多种格式,如8.16.32,而关联le.te的区别,Unicode编码格式才会有以下过程中的10种. 复制代码 代码如下: public static void main(String[] args) throws UnsupportedEncodingEx

  • php自动跳转中英文页面

    PHP代码: <? $lan = substr(?$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' content = '0;URL = gb/index.htm'>"); else print("<meta http-equiv='refresh' content = '0;URL = eng/index.htm'&

  • js判断字符长度及中英文数字等

    js判断字符长度及中英文数字等

    复制代码 代码如下: <script type="text/javascript"> var zfl={}; zfl.GetLength = function(str){ var realLength = 0,len = str.length,charCode = -1; for(var i=0;i<len;i++){ charCode = str.charCodeAt(i); if(charCode>0 && charCode<=128)

  • jquery结合html实现中英文页面切换

    目的:前端(只采用thymeleaf模板+jquery) 实现国际化 由:前端没有采用流行的vue.js angular 等框架,纯html不可以引用js中定义的常量 采用jquery赋值(维护2个模板(中,英)界面) 直接out 方案:采用https://github.com/coderifous/jquery-localize/ 一个本地化插件 a jQuery plugin that makes it easy to internationalize your web site 步骤: 1

  • asp.net实现中英文多域名检测的方法

    本文实例讲述了asp.net实现中英文多域名检测的方法.分享给大家供大家参考,具体如下: 第一步:在前台页面中写入js代码和相关控件 /****写入js代码****/ <%-- 域名检测 --%> <script type="text/javascript"> //判断输入的是否为中文域名 function IsChDomain(domainStr) { var flag = false; var compStr = "ABCDEFGHIGKLMNOP

  • C++统计中英文大小写字母、数字、空格及其他字符个数的方法

    C++统计中英文大小写字母、数字、空格及其他字符个数的方法

    本文实例讲述了C++统计中英文大小写字母.数字.空格及其他字符个数的方法.分享给大家供大家参考,具体如下: /* * 作 者: 刘同宾 * 完成日期:2012 年 11 月 28 日 * 版 本 号:v1.0 * 输入描述: * 问题描述: 有一篇文章,共有三行文字,每行有80个字符.要求分别统计出其中英文大写字母.小写字母.数字.空格以及其他字符的个数. * 程序输出: * 问题分析:略 * 算法设计:略 */ #include<iostream> using namespace std;

  • php 中英文语言转换类

    起初想到制成XML文档形式,这样操作也起来很容易.只是看到说XML效率不怎样 再者就是不同的模板,可这样也有个小问题,有些词汇比如时间提示是不确定,与可能是minute ,day.也有可能复数加 s 那好吧,做成数组,可数组就得做成在php文件的变量,很难做些扩展(我所知道所认为的是这样) 最后做成txt文本文件的形式,同样也为这样的效率担心,打开文件,搜索字符串,截取字符串这些,所幸最后运行了一下,一般机子大概0.0004秒,这让我很惊奇原以为会很慢,毕竟要调用多次. 好吧,上代码 复制代码

随机推荐