jQuery实现的超酷苹果风格图标滑出菜单效果代码


Posted in Javascript onSeptember 16, 2015

本文实例讲述了jQuery实现的超酷苹果风格图标滑出菜单效果代码。分享给大家供大家参考。具体如下:

这是一款超酷苹果风格图标滑出菜单,调用了jquery1.3.2的库文件,整个菜单动感十足,用在网站上增色不少。

运行效果截图如下:

jQuery实现的超酷苹果风格图标滑出菜单效果代码

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
javascript 面向对象编程基础:继承
Aug 21 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
vuex存储token示例
Nov 11 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 #Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 #Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 #Javascript
jQuery实现图片轮播特效代码分享
Sep 15 #Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 #Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 #Javascript
JQuery实现图片轮播效果
Sep 15 #Javascript
You might like
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
javascript之bind使用介绍
2011/10/09 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
实例浅析js的this
2016/12/11 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
python使用turtle库绘制时钟
2020/03/25 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
高级文秘工作总结的自我评价
2013/09/28 职场文书
自荐书模板
2013/12/15 职场文书
中学生爱国演讲稿
2013/12/31 职场文书
联谊活动策划书
2014/01/26 职场文书
学生党员公开承诺书
2014/05/28 职场文书
企业负责人任命书
2014/06/05 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
体育教师研修感悟
2015/11/18 职场文书