jQuery_jquery로 구현된 매우 멋진 Apple 스타일 아이콘 슬라이드 아웃 메뉴 효과 코드
- WBOY원래의
- 2016-05-16 15:39:031292검색
이 기사의 예에서는 jQuery로 구현된 멋진 사과 스타일 아이콘 슬라이드 아웃 메뉴 효과 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
이것은 jquery1.3.2 라이브러리 파일을 호출하는 매우 멋진 Apple 스타일 아이콘 슬라이드아웃 메뉴입니다. 전체 메뉴는 역동적이고 웹사이트에 많은 색상을 추가합니다.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo.jb51.net/js/2015/jquery-apple-style-ico-show-menu-codes/
구체적인 코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>超酷苹果风格图标滑出菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<style>
body{
margin:0px;
padding:0px;
background-color:#f0f0f0;
font-family:Arial;
}
.title{
position:absolute;
top:100px;
left:50%;
margin-left:-204px;
width:409px;
height:348px;
background:transparent url(images/title.png) no-repeat top left;
}
.info{
position:fixed;
bottom:0px;
left:0px;
}
.back{
display:block;
background:transparent url(images/back.png) no-repeat top left;
width:281px;
height:143px;
}
a.dry{
position:absolute;
bottom:10px;
right:10px;
color:#000;
font-weight:bold;
font-size:16px;
}
.navigation{
position:relative;
margin:0 auto;
width:915px;
}
ul.menu{
list-style:none;
font-family:"Verdana",sans-serif;
border-top:1px solid #bebebe;
margin:0px;
padding:0px;
float:left;
}
ul.menu li{
float:left;
}
ul.menu li a{
text-decoration:none;
background:#7E7E7E url(images/bgMenu.png) repeat-x top left;
padding:15px 0px;
width:128px;
color:#333333;
float:left;
text-shadow: 0 1px 1px #fff;
text-align:center;
border-right:1px solid #a1a1a1;
border-left:1px solid #e8e8e8;
font-weight:bold;
font-size:13px;
-moz-box-shadow: 0 1px 3px #555;
-webkit-box-shadow: 0 1px 3px #555;
}
ul.menu li a.hover{
background-image:none;
color:#fff;
text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
-moz-border-radius:0px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
border-left:none;
}
ul.menu li a.last{
-moz-border-radius:0px 0px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
width:64px;
height:64px;
background-repeat:no-repeat;
background-color:transparent;
position:absolute;
z-index:-1;
top:80px;
cursor:pointer;
}
ul.menu li span.ipod{
background-image:url(images/ipod.png);
left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
background-image:url(images/video_camera.png);
left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
background-image:url(images/television.png);
left:293px;
}
ul.menu li span.monitor{
background-image:url(images/monitor.png);
left:423px;
}
ul.menu li span.toolbox{
background-image:url(images/toolbox.png);
left:553px;
}
ul.menu li span.telephone{
background-image:url(images/telephone.png);
left:683px;
}
ul.menu li span.print{
background-image:url(images/print.png);
left:813px;
}
</style>
</head>
<body>
<div class="navigation">
<ul class="menu" id="menu">
<li><span class="ipod"></span><a href="#" class="first">Players</a></li>
<li><span class="video_camera"></span><a href="#">Cameras</a></li>
<li><span class="television"></span><a href="#">TVs</a></li>
<li><span class="monitor"></span><a href="#">Screens</a></li>
<li><span class="toolbox"></span><a href="#">Tools</a></li>
<li><span class="telephone"></span><a href="#">Phones</a></li>
<li><span class="print"></span><a href="#" class="last">Printers</a></li>
</ul>
</div>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
$(function() {
var d=1000;
$('#menu span').each(function(){
$(this).stop().animate({
'top':'-17px'
},d+=250);
});
$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).addClass('hover');
$('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
},
function () {
var $this = $(this);
$('a',$this).removeClass('hover');
$('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
}
);
});
</script>
</body>
</html>
이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.