- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html>
- <head>
- <title>jquery特效,jQuery弹性下拉导航菜单,jquery下拉菜单特效,下拉菜单特效代码</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <link rel="stylesheet" media="screen"/>
- <script type="text/javascript" src1="jquery-1.2.6.min.js"></script>
- <script type="text/javascript" src1="jquery.easing.1.3.js"></script>
- <script type="text/javascript">
- $(function() {
- $('#navigation > div').hover(
- function () {
- var $this = $(this);
- //$this.find('.images').fadeIn();
- $this.find('a.menu').removeClass('menu').addClass('hovered');
- $this.find('.images').stop().animate({
- 'width' :'230px',
- 'height' :'390px',
- 'opacity' :'1.0'
- },400,'easeOutBack',function(){
- $(this).parent().find('div').fadeIn('fast');
- });
- },
- function () {
- var $this = $(this);
- $this.find('div').fadeOut(500);
- //$this.find('.images').hide();
- $this.find('a.hovered').removeClass('hovered').addClass('menu');
- $this.find('.images').stop().animate({
- 'width' :'100px',
- 'height' :'0px',
- 'top' :'0px',
- 'left' :'0px',
- 'opacity' :'0.9'
- },600,'easeOutBack');
- }
- );
- });
- </script>
- </head>
- <body>
- <br clear="all" />
- <div id="content">
- <div class="total_images" id="navigation">
- <div class="eachs" id="link1">
- <a href="#" class="menu" style=" width:90px;">99Points</a>
- <img src1="bg.png" alt="" width="140" height="140" class="images"/>
- <div>
- <ul>
- <li><a href="http://www.ablanxue.com/shtmldir/3/">PHP</a></li>
- <li><a href="#">CodeIgniter</a></li>
- <li><a href="#">JQuery</a></li>
- <li><a href="http://www.ablanxue.com/shtmldir/18/62">AJAX</a></li>
- <li><a href="http://www.ablanxue.com/">Facebook</a></li>
- <li><a href="#">YOUTUBE</a></li>
- <li><a href="#">CSS</a></li>
- <li><a href="#">MYSQL</a></li>
- <li><a href="#">Tutorials</a></li>
- </ul>
- </div>
- </div>
- <div class="eachs" id="link4">
- <a href="#" class="menu" style=" width:90px;">JQuery</a>
- <img src1="bg.png" alt="" width="140" height="140" class="images"/>
- <div>
- <ul>
- <li><a href="#">PHP</a></li>
- <li><a href="#">CodeIgniter</a></li>
- <li><a href="#">JQuery</a></li>
- <li><a href="#">AJAX</a></li>
- <li><a href="#">Facebook</a></li>
- <li><a href="#">YOUTUBE</a></li>
- <li><a href="#">CSS</a></li>
- <li><a href="#">MYSQL</a></li>
- <li><a href="#">Tutorials</a></li>
- </ul> </div>
- </div>
- <div class="eachs" id="link2">
- <a href="#" class="menu" style=" width:100px;">FaceBook</a>
- <img src1="bg.png" alt="" width="160" height="199" class="images"/>
- <div>
- <ul>
- <li><a href="#">PHP</a></li>
- <li><a href="#">CodeIgniter</a></li>
- <li><a href="#">JQuery</a></li>
- <li><a href="#">AJAX</a></li>
- <li><a href="#">Facebook</a></li>
- <li><a href="#">YOUTUBE</a></li>
- <li><a href="#">CSS</a></li>
- <li><a href="#">MYSQL</a></li>
- <li><a href="#">Tutorials</a></li>
- </ul>
- </div>
- </div>
- <div class="eachs" id="link3">
- <a href="#" class="menu" style=" width:72px;">PHP</a>
- <img src1="bg.png" alt="" width="160" height="199" class="images"/>
- <div>
- <ul>
- <li><a href="#">PHP</a></li>
- <li><a href="#">CodeIgniter</a></li>
- <li><a href="#">JQuery</a></li>
- <li><a href="#">AJAX</a></li>
- <li><a href="#">Facebook</a></li>
- <li><a href="#">YOUTUBE</a></li>
- <li><a href="#">CSS</a></li>
- <li><a href="#">MYSQL</a></li>
- <li><a href="#">Tutorials</a></li>
- </ul> </div>
- </div>
- <div class="eachs" id="link5">
- <a href="#" class="menu" style=" width:84px;">AJAX</a>
- <img src1="bg.png" alt="" width="160" height="199" class="images"/>
- <div>
- <ul>
- <li><a href="#">PHP</a></li>
- <li><a href="#">CodeIgniter</a></li>
- <li><a href="#">JQuery</a></li>
- <li><a href="#">AJAX</a></li>
- <li><a href="#">Facebook</a></li>
- <li><a href="#">YOUTUBE</a></li>
- <li><a href="#">CSS</a></li>
- <li><a href="#">MYSQL</a></li>
- <li><a href="#">Tutorials</a></li>
- </ul> </div>
- </div>
- <br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" />
- </div>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/111120137032.html
来源: http://www.codesnippet.cn/detail/111120137032.html