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

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

这是一个很酷的苹果风格的图标滑出式菜单，调用了jquery1.3.2的库文件，整个菜单充满了动感，可以在网站上使用添加颜色。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/jquery-apple-style-ico-show-menu-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-严格。' DTD ' html标题超酷苹果风格图标滑出菜单/title meta http-equiv=' Content-Type ' Content=' text/html；charset=gbk '/style body { margin :0 px；padding:0px背景-颜色： # f0f 0；font-family : arial} .title { position : absolutetop :100 px左侧：50%;左边距：-204 px；宽度宽度：409像素高度：348 px背景：透明URL(图片/标题。巴布亚新几内亚)不重复左上角；} .信息{ position : fixedbottom :0 pxl eft :0 px }。back { display : block background :透明URL(图片/back。巴布亚新几内亚)不重复左上角；宽度宽度：281磅重量：143磅)a .干{绝对位置：bottom :10 pxright :10 pxcolor : # 000 font-weight : bold；font-size :16 px}.导航{位置：相对；margin:0汽车宽度宽度：915px} ul菜单{列表样式：无；font-family:'Verdana '，无衬线；边框-top:1px实心# beebemargin :0 pxpadding :0 pxfloat : left } ul。菜单李{左飘：}ul.menu阿利{ text-摆设：无；背景： # 7e7e 7e URL(图像/bgmenu。png)重复-x左上角；padding:15px 0px宽度width :128 pxcolor : # 333333 float : leftext-shadow : 0 1px 1px # fff；文本对齐：居中；右边框：1px实心# a1a1a1边框-左侧：1px实心# e8e 8e 8 font-weight : bold；font-size :13 px-moz-box-shadow : 0 1px 3px # 555；-web套件-box-shadow : 0 1px 3px # 555；} ul。菜单阿利。悬停{背景图像：无；color : # ffft ext-shadow : 0-1px 1px # 000；} ul。菜单阿利。第一{-moz-border-radius :0 px 0px 0px 10px；-web套件-边框-左下-半径： 10px边框-左侧：无；} ul。菜单阿利。最后{-moz-border-radius :0 px 0px 10px 0px；-网络套件-边框-右下角-半径： 10px} ul。菜单Li span { width :64 px高度：64px背景-重复：不重复；背景-颜色：透明；位置：绝对；z指数：-1;top:80pxcursor:pointer指针指针；} ul。菜单Li span。ipod { background-image : URL(images/ipod。巴布亚新几内亚)；left:33px/*128/2 - 32(图标的一半)1边框*/} ul。菜单Li span。video _ camera { background-image : URL(images/video _ camera。巴布亚新几内亚)；left:163px/*加上128 2px的边框*/} ul。菜单Li span。电视{背景图像： URL(图像/电视。巴布亚新几内亚)；left:293px} ul。菜单Li span。监视器{背景图像： URL(图像/监视器。巴布亚新几内亚)；left:423px} ul。菜单Li span。工具箱{ background-image : URL(图像/工具箱。巴布亚新几内亚)；left:553px} ul。菜单Li span。电话{ background-image : URL(图像/电话。巴布亚新几内亚)；left:683px} ul。菜单Li span。打印{背景图像： URL(图像/打印。巴布亚新几内亚)；left :813 px }/style/head body div class=' navigation ' ul class=' menu ' id=' menu ' lispan class=' ipod '/spana href=' # ' class=' first ' players/a/Li lispan class=' video _ camera '/spana href=' # ' camera/a/Li lispan class=' TV '/a/Li lispan class=' monitor '/spana href=' # ' Screens/a/Li lispan工具箱/spana href$(' #菜单跨度')。每个（函数(){ $(此)).停止()。动画({ 'top':'-17px' }，d=250)；});$(' #菜单li ').hover(function(){ var $ this=$(this)；$('a '，$this).addClass(')悬停');$('span '，$this).停止()。动画({'top':'40px'}，300).CSS({ ' ZINDEX ' : ' 10 ' })；}，function(){ var $ this=$(this)；$('a '，$this).removeClass(“”悬停');$('span '，$this).停止()。动画({'top':'-17px'}，800).CSS({ ' zIndex ' : '-1 ' })；} );});/脚本/正文/html希望本文所述对大家的jQuery程序设计有所帮助。