집 >웹 프론트엔드 >JS 튜토리얼 >탄력적 메뉴 효과 code_javascript 기술의 JS 구현

탄력적 메뉴 효과 code_javascript 기술의 JS 구현

WBOY원래의: 2016-05-16 15:40:141420검색

이 기사의 예에서는 유연한 메뉴 효과를 구현하는 JS 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

이것은 유연한 메뉴의 JavaScript CSS 구현입니다. 타사 클래스 라이브러리를 사용하지 않고 순전히 직접 작성한 연습입니다. 프론트 엔드 디자인을 배우는 친구에게 참고할 가치가 있다고 생각합니다. 관심이 있으시면 유연한 메뉴를 추가하실 수 있습니다. 배경을 아름다운 그림으로 변경하여 더욱 아름답게 만드세요.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/js-tx-move-menu-style-codes/

구체적인 코드는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Js实现菜单弹性菜单</title>
<style type="text/css">
body, ul, ol, dl, dt, dd, h1, h2, h3, h4, h5, p, form { padding: 0; margin: 0; }
li { list-style: none; }
img { border: 0; }
body { font-family: Arial; background: #fff url() repeat-x; }
#header { width: 960px; height: 107px; margin: 0 auto 12px; position: relative; }
#header h1 { padding-top: 15px; float: left; }
#header ul { height: 44px; position: absolute; right: 0; bottom: 0; }
#header .normal, #header .active { float: left; width: 88px; height: 44px; position: relative; z-index: 1; }
#header .normal a, #header .active a { float: left; width: 88px; height: 44px; line-height: 44px; text-align: center; text-decoration: none; font-size: 14px; font-weight: bold; }
#header .active a { color: #fff; }
#header .normal a { color: #999; }
#btn_bg { width: 88px; height: 44px; background: #fb2347 url(); position: absolute; overflow:hidden; left: 608px; bottom: 0; z-index: 2; }
#btn_bg ul { width: 528px; left:-176px; position:absolute; }
</style>
<script type="text/javascript">
var away;
window.onload=function()
{
 var odiv=document.getElementById("btn_bg");
 var oul=odiv.getElementsByTagName("ul")[0];
 var oli=document.getElementById("header").getElementsByTagName("ul")[0].getElementsByTagName("li");
 var i=0;
 for(i=0;i<oli.length;i++)
 {
  oli[i].index=i;
  oli[i].onmouseover=function()
  {
   away=432+88*this.index;
   menuInterval(); 
  };
 };
}
var timer=null;
function menuInterval()
{
 if(timer)
 {
  clearInterval(timer);
 }
 timer=setInterval(menuMove, 30);
}
var step=0;
var l=0;
function menuMove()
{
 var odiv=document.getElementById("btn_bg");
 var oul=odiv.getElementsByTagName("ul")[0];
  step+=(away-odiv.offsetLeft)/10;
  step=step*0.78;
 l=parseInt(odiv.offsetLeft+step);
 odiv.style.left=l+"px";
 oul.style.left=-l+432+"px";;
}
</script>
</head>
<body>
<div id="header">
 <ul>
 <li class="normal"><a href="#">首页</a></li>
 <li class="normal"><a href="#">叶子课程</a></li>
 <li class="normal"><a href="#">叶子资源</a></li>
 <li class="normal"><a href="#">留言</a></li>
 <li class="normal"><a href="#">叶子博客</a></li>
 <li class="normal"><a href="#">联系叶子</a></li>
 </ul>
 <div id="btn_bg">
  <ul>
  <li class="active"><a href="#">首页</a></li>
  <li class="active"><a href="#">叶子课程</a></li>
  <li class="active"><a href="#">叶子资源</a></li>
  <li class="active"><a href="#">留言</a></li>
  <li class="active"><a href="#">叶子博客</a></li>
  <li class="active"><a href="#">联系叶子</a></li>
  </ul>
 </div>
</div>
</body>
</html>

이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이 되기를 바랍니다.

성명：

이전 기사：js는 country_javascript 기술 전체의 지방 및 도시에서 계단식 드롭다운 메뉴의 효과 코드를 구현합니다.다음 기사：js는 country_javascript 기술 전체의 지방 및 도시에서 계단식 드롭다운 메뉴의 효과 코드를 구현합니다.

탄력적 메뉴 효과 code_javascript 기술의 JS 구현

관련 기사