jQuery는 마우스 배경 변경에 응답하는 동적 메뉴 효과 코드를 구현합니다._jquery
- WBOY원래의
- 2016-05-16 15:42:041201검색
이 기사의 예에서는 마우스 배경 변경에 응답하는 동적 메뉴 효과 코드의 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 프로그래밍 설계에 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.