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 类、命名空间、代码组织代码
Jul 31 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
在VUE style中使用data中的变量的方法
Jun 19 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最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
Node.js中对通用模块的封装方法
2014/06/06 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
React组件refs的使用详解
2018/02/09 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python中使用psutil查看内存占用的情况
2018/06/11 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
Python requests模块session代码实例
2020/04/14 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
基于Python 函数和方法的区别说明
2021/03/24 Python
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
个人素质的自我评价分享
2013/12/16 职场文书
制药工程专业毕业生推荐信
2013/12/24 职场文书
人事助理自荐信
2014/02/02 职场文书
新农村建设典型材料
2014/05/31 职场文书
入党积极分子群众意见
2015/06/01 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript