jQuery를 사용한 중국어와 영어 텍스트 탐색 표시줄 효과

먼저 보겠습니다.중국어-영어 텍스트 테스트 네비게이션 바이미지:

저는 두 가지 방법을 사용하여 구현했습니다. 하나는 CSS를 사용했습니다.3, 또 다른 방법은 jQuery를 사용합니다.

먼저 CSS에 대해 이야기해 보겠습니다.3구현 방법은 어떻게 될까요:

html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8-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>홈페이지</b>
 <i>홈페이지</i>
 </a>
 </li>
 <li>
 <a href="index.html">
 <b>포럼</b>
 <i>포럼</i>
 </a>
 </li>
 <li>
 <a href="index.html">
 <b>블로그</b>
 <i>블로그</i>
 </a>
 </li>
 <li>
 <a href="index.html">
 <b>마켓</b>
 <i>마켓</i>
 </a>
 </li>
 <li>
 <a href="index.html">
 <b>다운로드</b>
 <i>다운로드</i>
 </a>
 </li>
 </ul>
 </div>
</body>
</html>

css:

*{
 margin:0px;
 padding:0px;
 font-family: "Microsoft Yahei", Helvetica, sans-serif-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-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() 함수를 추가하여야 합니다. 즉, 모든 애니메이션을 먼저 중지한 후 이 애니메이션을 시작합니다.

이 글의 전체 내용이 끝납니다. 여러분의 학습에 도움이 되길 바랍니다. 또한, 나대호 교본에 많은 지원을 부탁드립니다.

기본 튜토리얼

좋아하는 것