집 > 기사 > 웹 프론트엔드 > jQuery는 마우스 배경 변경에 응답하는 동적 메뉴 효과 코드를 구현합니다._jquery

jQuery는 마우스 배경 변경에 응답하는 동적 메뉴 효과 코드를 구현합니다._jquery

WBOY원래의: 2016-05-16 15:42:041134검색

이 기사의 예에서는 마우스 배경 변경에 응답하는 동적 메뉴 효과 코드의 jQuery 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

마우스 배경 변경에 반응하는 jQuery 동적 메뉴입니다. 이 메뉴의 구현은 주로 그림을 사용하며, 그 내용은 다음과 같습니다. 좀 번거롭긴 한데 효과는 좋은 것 같아요.

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

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

http://demo.jb51.net/js/2015/jquery-mouse-cha-bg-pic-menu-codes/

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

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery动态导航菜单效果</title>
<style type="text/css" media="screen">
  body{
  background-color: #333; color:#FFFFFF
  }
  a{ color:#FFCC00;}
  #menuBar{
  overflow:hidden;
  width:503px;
  height:102px;
  background: transparent url(images/bar.jpg) no-repeat scroll left top;
  margin:0 auto;
  border:10px solid #111;
  }
  #menuBar ul{
  width:380px;
  margin:0 auto;
  list-style-type: none;
  }
  #menuBar ul li{
  float:left;
  padding-right:40px;
  }
  #menuBar a{
  width:55px;
  height:102px;
  display:block;
  background: transparent url(images/logos.jpg) no-repeat scroll left top;
  padding-top:100px;
  color:#ddd;
  font-family: Arial, "MS Trebuchet", sans-serif;
  text-decoration: none;
  font-size:10pt;
  font-weight:bold;
  outline:none;
  }
  #menuBar a:hover{
  background-image:url(images/logos-over.jpg);
  }
  #menuBar a#Home{
  background-position:-67px top;
  }
  #menuBar a#About{
  background-position:-166px top;
  }
  #menuBar a#Gallery{
  background-position:-266px top;
  }
  #menuBar a#Contact{
  background-position:-373px top;
  }
 </style>
 </head>
 <body>
 <div id="menuBar">
  <ul>
  <li><a href="#" id="Home">Home</a></li>
  <li><a href="#" id="About">About</a></li>
  <li><a href="#" id="Gallery">Gallery</a></li>
  <li><a href="#" id="Contact">Contact</a></li>
  </ul>
 </div><br />
 </body>
 <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
 <script type="text/javascript" charset="utf-8">
 $(document).ready(function() {
 $("a").mouseover(function(){
  var selected = "#"+$(this).attr("id");
  $(selected).animate({paddingTop:"78px"}, 100);
 }).mouseout(function(){
  var selected = "#"+$(this).attr("id");
  $(selected).animate({paddingTop:"100px"}, 100);
 });
 });
 </script>
</body>
</html>

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

성명：

이전 기사：자바스크립트에서 이미지 지연 로딩을 구현하는 방법 요약(3가지 방법)_javascript 기술다음 기사：자바스크립트에서 이미지 지연 로딩을 구현하는 방법 요약(3가지 방법)_javascript 기술

jQuery는 마우스 배경 변경에 응답하는 동적 메뉴 효과 코드를 구현합니다._jquery

관련 기사