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 相关文章推荐
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
基于element-ui封装表单金额输入框的方法示例
Jan 06 Javascript
Javascript webpack动态import
Apr 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.MVC的模板标签系统(三)
2006/09/05 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
vue 组件简介
2020/07/31 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
python采集博客中上传的QQ截图文件
2014/07/18 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
幼儿园秋游活动方案
2014/01/21 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
初中生物教学随笔
2015/08/15 职场文书
2016教师国培研修感言
2015/12/08 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技