JS实现了阿里妈妈网站顶部带关闭功能的横幅工具栏滑出的代码

本文讲述了一个JS实现阿里妈妈网站顶部带关闭功能的横幅工具栏滑出代码的例子。分享给大家参考。具体如下：

这是阿里妈妈网站顶部的一个横幅代码，用的是滑出法。是经典的工具栏代码，可以作为菜单使用，功能完善，可以及时关闭工具栏。整体设计美观，简约美观。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/js-top-float-banner-alimama-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题阿里妈妈网站顶部旗帜代码/title style body { margin :0 px；padding:0px } .home _ tx { PADDING-right : 0px；PADDING-左侧： 0px背景： URL(图片/hometx _ 03。gif)；PADDING-bottom : 0px；余量：自动；隐藏飞越：宽度： 950像素；填充-TOP: 0px} .home _ tx IMG { BOrder-TOP-width : 0px；PADDING-right : 0px；PADDING-左侧： 0px边框-左侧-宽度： 0px边框-底部-宽度： 0pxPADDING-bottom : 0px；margin : 0px add-TOP : 0px；边框-右侧-宽度： 0px} .home _ tx DL { PADDING-right : 0px；PADDING-左侧： 0px左侧浮动：PADDING-bottom : 0px；margin : 0px 10px 0px 0px width : 61 xpadding-TOP : 0px；HEIGHT: 37px} .home _ tx SPAN { PADDING-right : 0px；PADDING-左侧： 0pxFONT-SiZe : 12px；左侧浮动：PADDING-bottom : 0px；余量： 0px宽度： 830像素；颜色： # 333333线高： 34pxPADDING-TOP : 0px；高： 37px文本-左侧对齐： }。home _ tx SPAN B { PADDING-right : 0px；PADDING-左侧： 0px字体-重量：正常；左侧浮动：PADDING-bottom : 0px；margin : 0pxcolor : # 990000 padding-top : 0px } .home _ tx A { PADDING-right : 0px；PADDING-左侧： 0px右侧浮子：PADDING-bottom : 0px；余量： 0px宽度： 35pxPADDING-TOP : 0px；height : 37px }/style/headdydiv id=home _ tx style=' PADDING-right : 0px；PADDING-左侧： 0pxPADDING-bottom : 0px；余量：自动；隐藏飞越：宽度： 950像素；PADDING-TOP : 0px；相对位置：HEIGHT: 1px'DIV类=home _ tx id=home _ tx _ in style='位置：绝对；TOP:-37px；高度： 37px ' align=CenterdLimg src=' http : images/hometx _ 01。gif '/DLSPANB我们提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料/B样式="无"详情/A/SPAN A style='CURSOR:指针聚焦=这个。blur()OnClick=' home _ tx _ hide()；返回false href=' # ' IMG src=' http : images/hometx _ 04。gif '/A/DIV/DIVscriptvar为_ home _ tx _ show=falsevar div _ home _ tx=文档。getelementbyid(' home _ tx ')；var div _ home _ tx _ in=文档。getelementbyid(' home _ tx _ in ')；定义变量步长=10;函数home _ tx _ show(){ home _ tx _ step show()；}函数home _ tx _ step show(){ var curHeight=parsent(div _ home _ tx。右偏)；if(CurHeight=37){ is _ home _ tx _ show=true；} else { div _ home _ tx。风格。height=(CurHeight 4)“px”；div _ home _ tx _ in。风格。top=(ParSeint(div _ home _ tx _ in。风格。top)4)' px '；窗户。settimeout(home _ tx _ step show，30)；} }函数home _ tx _ hide(){ if(is _ home _ tx _ show){ home _ tx _ stephide()} else { window。settimeout(home _ tx _ stephide，1200)；} }函数home _ tx _ stephide(){ var curHeight=ParSeint(div _ home _ tx。风格。高度)；if(CurHeight=0){ is _ home _ tx _ show=false；} else { try { div _ home _ tx。风格。height=(CurHeight-4)“px”；div _ home _ tx _ in。风格。top=(ParSeint(div _ home _ tx _ in。风格。top)-4)' px '；窗户。settimeout(home _ tx _ stephide，30岁)；} catch(e){ } } } if(window。addeventlistener){ window。addeventlistener(' load '，home_tx_show，false)；} else { window。attachevent(' onload '，home _ tx _ show)；}/脚本/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。