特效描述:利用jquery实现 圆形气泡 导航特效,利用jquery实现圆形气泡导航特效
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
2. 引入JS
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script>
3. HTML代码
<div id="content"> <div class="title"></div> <div class="navigation" id="nav"> <div class="item user"> <img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a> <h2>User</h2> <ul> <li><a href="#">Profile</a></li> <li><a href="#">Properties</a></li> <li><a href="#">Privacy</a></li> </ul> </div> <div class="item home"> <img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a> <h2>Home</h2> <ul> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="item shop"> <img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a> <h2>Shop</h2> <ul> <li><a href="#">Catalogue</a></li> <li><a href="#">Orders</a></li> <li><a href="#">Offers</a></li> </ul> </div> <div class="item camera"> <img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a> <h2>Photos</h2> <ul> <li><a href="#">Gallery</a></li> <li><a href="#">Prints</a></li> <li><a href="#">Submit</a></li> </ul> </div> <div class="item fav"> <img src="images/bg_fav.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a> <h2>Love</h2> <ul> <li><a href="#">Social</a></li> <li><a href="#">Support</a></li> <li><a href="#">Comments</a></li> </ul> </div> </div> </div> <!-- The JavaScript --> <script type="text/javascript"> $(function() { $('#nav > div').hover( function () { var $this = $(this); $this.find('img').stop().animate({ 'width' :'199px', 'height' :'199px', 'top' :'-25px', 'left' :'-25px', 'opacity' :'1.0' },500,'easeOutBack',function(){ $(this).parent().find('ul').fadeIn(700); }); $this.find('a:first,h2').addClass('active'); }, function () { var $this = $(this); $this.find('ul').fadeOut(500); $this.find('img').stop().animate({ 'width' :'52px', 'height' :'52px', 'top' :'0px', 'left' :'0px', 'opacity' :'0.1' },5000,'easeOutBack'); $this.find('a:first,h2').removeClass('active'); } ); }); </script>