jquery实现的旗帜广告收缩效果代码

本文实例讲述了jquery实现的旗帜广告收缩效果代码。分享给大家供大家参考。具体如下：

这里演示一个旗帜广告收缩效果，点开后，网页显示大广告，用鼠标点击"关闭"后，广告会收缩上去，此效果已在各大网站见到过，欢迎借鉴使用。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-横幅-展示-关闭-样式-代码/

具体代码如下：

！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 type=' text/CSS ' * { margin :0；划水：0;}/*为了方便直接这样重置了*/# main { margin 33600 auto；宽度width :960 px } # banner { display : none margin :0 auto宽度宽度：960像素高度：160 px背景： URL(图片/横幅。巴布亚新几内亚)不重复；位置：相对；} #关闭{ display:block宽度：50 px高度：22px文本对齐：居中；线高：22 pxborder:1px #ddd固体；背景技术： # 000;color : # ffffont-size :12 px；右浮动：光标：指针指针；}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(function(){ $(' # banner ')).向下滑动()；var Up=function(){$('#banner ').slideUp(1500)}setTimeout(Up，3000)；$('#close ').单击(函数(){$('#banner ')).slideToggle(600，function(){if($('#banner '))).CSS(' display ')==' none '){ $(' # close ').文本('打开');}else{$('#close ').文本('关闭');}});});});/script/head dydiv id=' main ' div id=' banner '/div span id=' close '关闭/span/div/body/html希望本文所述对大家的jquery程序设计有所帮助。