主页 / 网络编程 /

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

网络编程 2021-07-04 20:00www.168986.cn编程入门
这篇文章主要为大家详细介绍了基于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-: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-:-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-: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).s().animate({"margin-":-40},200)
 },function(){
 $(this).s().animate({"margin-":0},200)
 });
});

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

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

上一篇：Query常用DIV操作获取和设置长度宽度的实现方法 下一篇：jQuery EasyUI常用数据验证汇总

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by