jQuery實(shí)現(xiàn)首頁頂部可伸縮廣告特效代碼

更新時(shí)間：2015年04月15日 10:59:49 投稿：hebedich

一套使用jQuery 插件實(shí)現(xiàn)的廣告特效代碼,其效果類似全屏廣告,打開網(wǎng)頁后在網(wǎng)頁的第一屏顯示大幅廣告,停留幾秒后慢慢伸縮至標(biāo)準(zhǔn)小圖片顯示在網(wǎng)頁預(yù)留位置上，效果非常不錯(cuò)，這里推薦給大家。

特效介紹

麥包包首頁頂部廣告代碼仿麥包包首頁頂部伸縮廣告jQuery廣告代碼。頁面載入完成后，2.5秒后會(huì)自動(dòng)放大廣告顯示，頁面內(nèi)容自動(dòng)向下延伸。顯示8.5秒后自動(dòng)收回，放小顯示。

演示圖

使用方法

1、把下面的CSS樣式拷貝到您的html的頭部：

復(fù)制代碼代碼如下:

2、把以下代碼拷貝到整個(gè)頁面頂部，即<body>的下面。

<DIV style="MARGIN: 0px auto; WIDTH: 960px; DISPLAY: block" id=js_ads_banner_top>
  <A href="/" target=_blank><IMG src="images/banner_s.jpg" width=960 height=70></A>
</DIV>
<DIV style="MARGIN: 0px auto; WIDTH: 960px; DISPLAY: none" id=js_ads_banner_top_slide>
  <A href="/" target=_blank><IMG src="images/banner_b.jpg" width=960 height=400></A>
</DIV>
<SCRIPT type=text/javascript src="jquery/jquery-1.8.3.min.js"> </SCRIPT>
<SCRIPT type=text/javascript src="js/js.js"> </SCRIPT>

3、js代碼分析(js.js)：

if ($("#js_ads_banner_top_slide").length){  //判斷當(dāng)前廣告是否展開，如果沒有，則執(zhí)行下面代碼
  var $slidebannertop = $("#js_ads_banner_top_slide"),$bannertop = $("#js_ads_banner_top");
  setTimeout(function(){$bannertop.slideUp(1000);$slidebannertop.slideDown(1000);},2500); //2500毫秒(2.5秒)后，小廣告收回，大廣告伸開，執(zhí)行時(shí)間都是1秒(1000毫秒)
  setTimeout(function(){$slidebannertop.slideUp(1000,function (){$bannertop.slideDown(1000);});},8500); //8.5秒(8500毫秒)之后，大廣告收回，小廣告展開。
}

本站下載演示地址

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

jquery Tab效果和動(dòng)態(tài)加載的簡(jiǎn)單實(shí)例
這篇文章主要是對(duì)jquery中Tab效果和動(dòng)態(tài)加載的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下。希望對(duì)大家有所幫助
2013-12-12
jQuery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)畫矩形框示例【可兼容IE8】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)畫矩形框,結(jié)合實(shí)例形式分析了jQuery基于事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)的圖形繪制相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
使用jquery+CSS實(shí)現(xiàn)控制打印樣式
這篇文章主要介紹了使用jquery+CSS實(shí)現(xiàn)控制打印樣式,需要的朋友可以參考下
2014-12-12
2種jQuery 實(shí)現(xiàn)刮刮卡效果
這篇文章主要介紹了2種jQuery 實(shí)現(xiàn)刮刮卡效果,需要的朋友可以參考下
2015-02-02
Jquery動(dòng)態(tài)改變圖片IMG的src地址示例
改變圖片IMG的鏈接地址在某些特殊情況下實(shí)現(xiàn)特殊的功能還是比較不錯(cuò)的，下面為大家詳細(xì)介紹下使用jquery改變圖片IMG的鏈接地址，感興趣的朋友可以參考下哈
2013-06-06
jquery實(shí)現(xiàn)ajax提交表單信息的簡(jiǎn)單方法(推薦)
下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)ajax提交表單信息的簡(jiǎn)單方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
jquery改變disabled的boolean狀態(tài)的三種方法
改變disabled的boolean狀態(tài)，下面為大家介紹三種比較不錯(cuò)的方法，大家可以參考下
2013-12-12
jquery實(shí)現(xiàn)動(dòng)態(tài)添加附件功能
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)添加附件功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10
jQuery彈出層插件簡(jiǎn)化版代碼下載
2008-10-10
jquery實(shí)現(xiàn)tab鍵進(jìn)行選擇后enter鍵觸發(fā)click行為
本文主要介紹了jquery鍵盤事件實(shí)現(xiàn)tab鍵進(jìn)行選擇后enter鍵觸發(fā)click行為的方法，這種使用場(chǎng)景為當(dāng)首頁有幾個(gè)鏈接需要選擇的時(shí)候，使用鍵盤就可以進(jìn)行觸發(fā)行為。下面跟著小編一起來看下吧
2017-03-03