jQuery實現(xiàn)首頁頂部可伸縮廣告特效代碼
更新時間：2015年04月15日 10:59:49 投稿：hebedich
一套使用jQuery 插件實現(xiàn)的廣告特效代碼,其效果類似全屏廣告,打開網(wǎng)頁后在網(wǎng)頁的第一屏顯示大幅廣告,停留幾秒后慢慢伸縮至標準小圖片顯示在網(wǎng)頁預留位置上，效果非常不錯，這里推薦給大家。
特效介紹
麥包包首頁頂部廣告代碼仿麥包包首頁頂部伸縮廣告jQuery廣告代碼。頁面載入完成后，2.5秒后會自動放大廣告顯示，頁面內(nèi)容自動向下延伸。顯示8.5秒后自動收回，放小顯示。
演示圖
使用方法
1、把下面的CSS樣式拷貝到您的html的頭部：
復制代碼 代碼如下:
<LINK rel=stylesheet type=text/css href="css/style.css">
2、把以下代碼拷貝到整個頁面頂部，即<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){ //判斷當前廣告是否展開，如果沒有，則執(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í)行時間都是1秒(1000毫秒)
setTimeout(function(){$slidebannertop.slideUp(1000,function (){$bannertop.slideDown(1000);});},8500); //8.5秒(8500毫秒)之后，大廣告收回，小廣告展開。
}
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
您可能感興趣的文章:
- jquery實現(xiàn)兩邊飄浮可關(guān)閉的對聯(lián)廣告
- jQuery網(wǎng)頁右側(cè)廣告跟隨滾動代碼分享
- jquery實現(xiàn)可關(guān)閉的倒計時廣告特效代碼
- jquery實現(xiàn)滑屏大圖定時收縮為小banner圖片的廣告代碼
- jquery右下角自動彈出可關(guān)閉的廣告層
- jquery實現(xiàn)對聯(lián)廣告的方法
- 基于jquery實現(xiàn)的定時顯示與隱藏div廣告的實現(xiàn)代碼
- 基于jquery實現(xiàn)圖片廣告輪換效果代碼
- jQuery 浮動廣告實現(xiàn)代碼
- jQuery實現(xiàn)頁面頂部下拉廣告
相關(guān)文章
這篇文章主要是對jquery中Tab效果和動態(tài)加載的簡單實例進行了介紹，需要的朋友可以過來參考下。希望對大家有所幫助2013-12-12
jQuery實現(xiàn)的鼠標拖動畫矩形框示例【可兼容IE8】
這篇文章主要介紹了jQuery實現(xiàn)的鼠標拖動畫矩形框,結(jié)合實例形式分析了jQuery基于事件響應及頁面元素屬性動態(tài)操作實現(xiàn)的圖形繪制相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了使用jquery+CSS實現(xiàn)控制打印樣式,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了2種jQuery 實現(xiàn)刮刮卡效果,需要的朋友可以參考下2015-02-02
改變圖片IMG的鏈接地址在某些特殊情況下實現(xiàn)特殊的功能還是比較不錯的，下面為大家詳細介紹下使用jquery改變圖片IMG的鏈接地址，感興趣的朋友可以參考下哈2013-06-06
jquery實現(xiàn)ajax提交表單信息的簡單方法(推薦)
下面小編就為大家?guī)硪黄猨query實現(xiàn)ajax提交表單信息的簡單方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
jquery改變disabled的boolean狀態(tài)的三種方法
改變disabled的boolean狀態(tài)，下面為大家介紹三種比較不錯的方法，大家可以參考下2013-12-12
這篇文章主要為大家詳細介紹了jquery實現(xiàn)動態(tài)添加附件功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
2008-10-10
jquery實現(xiàn)tab鍵進行選擇后enter鍵觸發(fā)click行為
本文主要介紹了jquery鍵盤事件實現(xiàn)tab鍵進行選擇后enter鍵觸發(fā)click行為的方法，這種使用場景為當首頁有幾個鏈接需要選擇的時候，使用鍵盤就可以進行觸發(fā)行為。下面跟著小編一起來看下吧2017-03-03