Rumah >hujung hadapan web >tutorial js >jquery melaksanakan Slaid Keluar Navigasi menu slaid keluar kesan code_jquery

jquery melaksanakan Slaid Keluar Navigasi menu slaid keluar kesan code_jquery

WBOYasal: 2016-05-16 15:40:171093semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan jquery kod kesan menu slaid keluar Navigasi Slaid Keluar. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Di sini kami memperkenalkan kesan navigasi Slide Out Navigation yang dilaksanakan oleh jquery yang mengikut tetikus untuk meluncur keluar Selepas tetikus dialihkan, menu dengan cepat keluar dari atas ke bawah Versi baharu pemalam jQuery dipetik . Menu boleh digunakan dengan mengubahnya, seperti menukar warna latar belakang Atau saiz teks, dsb.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-slide-out-nav-menu-style-codes/

Kod khusus adalah seperti berikut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Slide Out Navigation</title>
<script type='text/javascript' src='jquery-1.6.2.min.js'></script>
<style type="text/css">
body{ font-family:arial;}
ul#navigation {
 list-style: none outside none;
 margin: 0;
 padding: 0;
 position: fixed;
 right: 10px;
 top: 0;
 width: 721px;
 z-index: 999999;
}
ul#navigation li {
 display: inline;
 float: left;
 width: 103px;
}
ul#navigation li a {
 background-color: #E7F2F9;
 background-position: 50% 10px;
 background-repeat: no-repeat;
 border: 1px solid #BDDCEF;
 border-radius: 0 0 10px 10px;
 display: block;
 float: left;
 height: 25px;
 margin-top: -2px;
 opacity: 0.7;
 padding-top: 80px;
 text-align: center;
 text-decoration: none;
 line-height:25px;
 width: 100px;
 font-size:11px;
 color: #60ACD8;
 letter-spacing: 2px;
 text-shadow: 0 -1px 1px #FFFFFF;
}
ul#navigation li a:hover {
 background-color: #CAE3F2;
}
ul#navigation .home a {
 background: url(images/home.png) no-repeat;
}
ul#navigation .about a {
 background: url(images/id_card.png) no-repeat;
}
ul#navigation .search a {
 background: url(images/search.png) no-repeat;
}
ul#navigation .podcasts a {
 background: url(images/ipod.png) no-repeat;
}
ul#navigation .rssfeed a {
 background: url(images/rss.png) no-repeat;
}
ul#navigation .photos a {
 background: url(images/camera.png) no-repeat;
}
ul#navigation .contact a {
 background: url(images/mail.png) no-repeat;
}
</style>
</head>
<body>
<ul id="navigation">
 <li class="home"><a href="">Home</a></li>
 <li class="about"><a href="">About</a></li>
 <li class="search"><a href="">Search</a></li>
 <li class="photos"><a href="">Photos</a></li>
 <li class="rssfeed"><a href="">Rss Feed</a></li>
 <li class="podcasts"><a href="">Podcasts</a></li>
 <li class="contact"><a href="">Contact</a></li>
</ul>
<script type="text/javascript">
$(function() {
 var d=300;
 $('#navigation a').each(function(){
 $(this).stop().animate({
 'marginTop':'-80px'
 },d+=150);
 });
 $('#navigation > li').hover(
 function () {
 $('a',$(this)).stop().animate({
 'marginTop':'-2px'
 },200);
 },
 function () {
 $('a',$(this)).stop().animate({
 'marginTop':'-80px'
 },200);
 }
 );
 });
</script>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：imej fokus skrin penuh jQuery ke kiri dan kanan menatal kesan khas kod sharing_jqueryArtikel seterusnya：imej fokus skrin penuh jQuery ke kiri dan kanan menatal kesan khas kod sharing_jquery

Artikel berkaitan

Lihat lagi