jq+css3弹动下拉菜单jquery+css3弹动渐变下拉菜单代码下载.zip资源-CSDN文库

共5个文件

js：2个

png：1个

html：1个

版权申诉

javascript

jQuery

html5

56 浏览量 2022-11-19 19:46:27 上传评论收藏 29KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jq+css3弹动下拉菜单 jquery+css3弹动渐变下拉菜单代码下载.zip （5个子文件）

jq+css3弹动下拉菜单 jquery+css3弹动渐变下拉菜单代码下载

jiaoben835

css

zzsc.css 3KB

images

bg.png 6KB

index.html 5KB

jquery-1.2.6.min.js 54KB

jquery.easing.1.3.js 8KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css3弹动下拉菜单 - 网页模板</title> <link rel="stylesheet" href="css/zzsc.css" type="text/css" media="screen"/> <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="js/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> <div id="lanrenzhijia"> <div class="total_images" id="navigation"> <div class="eachs" id="link1"> <a href="#" class="menu" style=" width:90px;">99Points</a> <img src="images/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="link4"> <a href="#" class="menu" style=" width:90px;">JQuery</a> <img src="images/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 src="images/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 src="images/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 src="images/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> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <div style="text-align:center;clear:both"> <p>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p> <p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人之家</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉