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 相关文章推荐
js 获取服务器控件值的代码
Mar 05 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
Vue波纹按钮组件制作
Apr 30 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 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 引用文件技巧
2010/03/02 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python常见异常分类与处理方法
2017/06/04 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
Django中提示消息messages的设置方式
2019/11/15 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
python简单实现插入排序实例代码
2020/12/16 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
银行求职信范文
2014/05/26 职场文书
体育比赛口号
2014/06/09 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
励志演讲稿大全
2014/08/21 职场文书
英语教师求职信范文
2015/03/20 职场文书
新生儿未入户证明
2015/06/23 职场文书
师范生见习自我总结
2015/06/23 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server