jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码

本文实例讲述了jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码。分享给大家供大家参考。具体如下：

这是一款仿百度首页jQuery滑动伸缩展开的添加服务效果，其实是一款伸缩菜单，只不过这个菜单有点特别，只从一头向另一头伸展出去，菜单的伸缩效果平滑，设计精美。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-f-Baidu-index-show-server-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN ' ' http://www .w3。org/TR/XHTML 11/DTD/XHTML 11。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' health eta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title添加服务/title style * { padd :0；边距：0font:12px/26px '微软雅黑；}a、a :悬停{ text-decoration : nonecolor : # CCC } dl { margin :0 auto order :1 px实心# ffffloat:left位置：绝对；左侧：50%;color : # cccmargin :100 px 0 100 px-45px；飞越：隐藏；} dl。打开{左边距-:-200 px；} dl。打开dt { background : URL(images/s _ add _ all _ 3f 6 f 39 e 5。png)0 0不重复；} dl dt { width:94px高度：30 px线高：30 px文本对齐：居中；光标：指针指针；位置：相对；z索引：10;float:left背景# fff} dl dd { display:none高度：28 px浮动：left} dl dd a {浮动：left显示：块；高度：28 px行高：28 pxpadding:0 15px 0 35px位置：相对；左侧：-300像素；边框-top:1px实心# E5E5E5边框-bottom:1px实心# e5e5e background : URL(images/s _ add _ all _ 3f 6 f 39 e 5。巴布亚新几内亚)无重复；}dl dd .nav {背景-位置：13 px-35px；}dl dd .热点{背景-位置：13 px-61px；}dl dd .app {背景-位置：13 px-87px；}dl dd .新鲜{背景-位置：13 px-113 px；右边框：1px实心# E5E5E5} dl DD。nav :悬停{背景-位置：-104 px-35px；} dl DD。hot :悬停{背景-位置：-104 px-61px；} dl DD。app :悬停{背景-位置：-104 px-87px；} dl DD。新鲜：悬停{背景-位置：-104 px-113 px；}/style/head dydldt id=' add '添加服务/dtdd id=' con ' a class=' nav ' href=' # '导航/aa class='hot' href='# '实时热点/aa class='app' href='# '应用/aa class='fresh' href='# '新鲜事/a/DD/dl/body脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/脚本脚本窗口。onload=function(){ var Close=function(event){ $(' DD a ').动画({左：-400 })；setTimeout('$('dl ').css(“”左边距',-45);$('dl ').removeClass('open ')'，300)}；var Open=函数（事件){ $('dd ').show()；var dl_W=$('dl ').宽度();$('dl ').addClass('open ').css('margin-left '，-dl _ W/2)；$('dd a ').动画({left: 0}，300)；停止（事件);};var Stop=函数(事件){ e=事件| |窗口。事件；if(e . stopperpagation){ e . stopperpagation()；} else { e.cancelBubble=true } }$(文档)。绑定('点击，关闭);$('dt ').绑定('点击，打开);$('dd ').绑定('点击，停止);};/script/html希望本文所述对大家的jQuery程序设计有所帮助。