jquery 동적 부동 탐색 메뉴 코드 Sharing_jquery
- WBOY원래의
- 2016-05-16 15:44:421381검색
동적 플로팅 탐색 메뉴를 구현하기 위한 jquery 기반의 특수 효과 코드입니다. 메뉴는 위아래로 떠 있을 수 있으며 역동적으로 가득 차 있어 웹사이트에 활력을 더해줍니다. 암호.
작업 렌더링:
소스코드를 다운로드하려면 을 클릭하세요
공유해주신 jquery 동적 플로팅 탐색 메뉴 코드는 다음과 같습니다
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Floating Menu</title>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function () {
//get the default top value
var top_val = $('#menu li a').css('top');
//animate the selected menu item
$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});
$('#menu li').hover(
function () {
//animate the menu item with 0 top value
$(this).children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});
},
function () {
//set the position to default
$(this).children('a').stop().animate({top:top_val}, {easing: 'easeOutQuad', duration:500});
//always keep the previously selected item in fixed position
$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});
}
);
});
</script>
<style>
#menu {
list-style:none;
padding:0;
margin:0 auto;;
height:70px;
width:600px;
}
#menu li {
float:left;
width:109px;
height:inherit;
position:relative;
overflow:hidden;
}
#menu li a {
position:absolute;
top:20px;
text-indent:-999em;
background:url(menu.png) no-repeat 0 0;
display:block;
width:109px;
height:inherit;
/* fast png fix for ie6 */
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}
</style>
</head>
<body>
<br/><br/><br/>
<ul id="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Floating Menu</title>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function () {
//get the default top value
var top_val = $('#menu li a').css('top');
//animate the selected menu item
$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});
$('#menu li').hover(
function () {
//animate the menu item with 0 top value
$(this).children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});
},
function () {
//set the position to default
$(this).children('a').stop().animate({top:top_val}, {easing: 'easeOutQuad', duration:500});
//always keep the previously selected item in fixed position
$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});
}
);
});
</script>
<style>
#menu {
list-style:none;
padding:0;
margin:0 auto;;
height:70px;
width:600px;
}
#menu li {
float:left;
width:109px;
height:inherit;
position:relative;
overflow:hidden;
}
#menu li a {
position:absolute;
top:20px;
text-indent:-999em;
background:url(menu.png) no-repeat 0 0;
display:block;
width:109px;
height:inherit;
/* fast png fix for ie6 */
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}
</style>
</head>
<body>
<br/><br/><br/>
<ul id="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
위 내용은 여러분에게 공유된 jquery 동적 부동 탐색 메뉴 코드입니다. 마음에 드셨으면 좋겠습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.