jquery实现滑屏大图定时收缩为小旗帜图片的广告代码

本文实例讲述了jquery实现滑屏大图定时收缩为小旗帜图片的广告代码。分享给大家供大家参考。具体如下：

这是一款基于jQuery实现的射流研究…广告特效，滑屏大图广告定时收缩为小旗帜图片广告代码，这种广告在各大门户网站现在还能看得到，刚打开网页的时候可以看到滑下来的大图片广告，过一会，广告自动缩小变成了一个旗帜横幅广告，并带有关闭按钮，可以关闭广告，对于广告来说，这个代码挺实用。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-roll-big-pic-cha-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 ' head titlejquery顶部大图定时缩为小广告可关闭代码/title样式正文{ margin :0划水：0;}img{ border:0}，root1200 { width:1200px高度：100 pxmargin :0 auto overflow : visible } .包装FFF；font-size :12 pxfont-family:Verdana，日内瓦，无衬线；背景技术： # 333;余量：0 0-20px 10px；padding:2px 5px 2px 10pxz指数：999;位置：绝对；top:10px}/style脚本语言=' JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script/head discript type=' text/JavaScript '/* *宽窄屏切换* */var大屏=假；if(屏幕。宽度=1200){大屏幕=真；var body标记=文档。getelementsbytagname(' body ')[0]，body类名=body标记。getattribute('类名')| | body标记。getattribute(' class ')；bodyClassName=bodyClassName？正文类名“:”；身体标签。类名=body类名' root 1200 '；}/script div class=' wrapper ' id=' snaactive-wrapper ' em title='关闭广告close/EMA target=' _ blank ' name=' red baby _ none _ ggw _ dt01 ' title='小图href='/'/aa target=' _ blank ' name=' red baby _ none _ ggw _ dt01 ' title='大图href='/'/a/div脚本类型=' text/JavaScript ' ~ function(){ var snaactive=window。snaactive=文档。getelementbyid(' snaactive-wrap ')，a=snaactive。getelementsbytagname(' a ')，h=0，w，IMgsrc=[]；如果(大屏幕){ w=1190 imgsrc[0]=' images/1390124030537 _ 1200。jpg '；//40 img src[1]=' images/1390124049068 _ 1200。jpg '；//500 } else { w=990；img src[0]=' images/1390124028186。jpg '；//40 img src[1]=' images/1390124043025。jpg '；//500 } s active。风格。溢出='隐藏'；a[0]。风格。显示='无'；a[0].innerHTML=' img width=' w ' height=' 40 ' src=' http : ' img src[0]' style=' display : block '/'；if(a[1]){a[1].innerHTML=' img width=' w ' height=' 500 ' src=' http : ' IMgsrc[1]' style=' display : block '/'；}}();//关闭通栏广告var snaactive=$(snaactive)，hideImg=snaactive。find(' a :隐藏')，em=snaactive。find(' em ')；超时=!1;if(hideImg[0]){ time out=setTimeout(function(){ snaactive }。animate({ height :40 }，600，function(){hideImg。姐弟(“a:visible”).hide()；隐藏。show()；em.show().live('click '，function(){ snaactive。向上滑动(300；});});}，3000)}/script div style=' text-align : center；clear:both'/div/body/html希望本文所述对大家的jquery程序设计有所帮助。