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自动显示最后更新时间
Mar 15 Javascript
浅谈javascript的数据类型检测
Jul 10 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
js创建数组的简单方法
Jul 27 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 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+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
php分页函数完整实例代码
2014/09/22 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
JS Array对象入门分析
2008/10/30 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
python使用mysql数据库示例代码
2017/05/21 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
开放系统互连参考模型
2016/06/29 面试题
医院护士的求职信
2014/01/03 职场文书
个人简历自我评价
2014/02/02 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
老人祝寿主持词
2014/03/28 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
黄山导游词
2015/01/31 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
户外亲子活动总结
2015/05/08 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书