jQuery實(shí)現(xiàn)首頁頂部可伸縮廣告特效代碼
特效介紹
麥包包首頁頂部廣告代碼仿麥包包首頁頂部伸縮廣告jQuery廣告代碼。頁面載入完成后,2.5秒后會(huì)自動(dòng)放大廣告顯示,頁面內(nèi)容自動(dòng)向下延伸。顯示8.5秒后自動(dòng)收回,放小顯示。
演示圖
使用方法
1、把下面的CSS樣式拷貝到您的html的頭部:
<LINK rel=stylesheet type=text/css href="css/style.css">
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)容了,希望大家能夠喜歡。
- jquery實(shí)現(xiàn)兩邊飄浮可關(guān)閉的對(duì)聯(lián)廣告
- jQuery網(wǎng)頁右側(cè)廣告跟隨滾動(dòng)代碼分享
- jquery實(shí)現(xiàn)可關(guān)閉的倒計(jì)時(shí)廣告特效代碼
- jquery實(shí)現(xiàn)滑屏大圖定時(shí)收縮為小banner圖片的廣告代碼
- jquery右下角自動(dòng)彈出可關(guān)閉的廣告層
- jquery實(shí)現(xiàn)對(duì)聯(lián)廣告的方法
- 基于jquery實(shí)現(xiàn)的定時(shí)顯示與隱藏div廣告的實(shí)現(xiàn)代碼
- 基于jquery實(shí)現(xiàn)圖片廣告輪換效果代碼
- jQuery 浮動(dòng)廣告實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)頁面頂部下拉廣告
相關(guān)文章
jquery實(shí)現(xiàn)根據(jù)瀏覽器窗口大小自動(dòng)縮放圖片的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)根據(jù)瀏覽器窗口大小自動(dòng)縮放圖片的方法,涉及jquery操作頁面元素屬性與樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07jQuery實(shí)現(xiàn)類似標(biāo)簽風(fēng)格的導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)類似標(biāo)簽風(fēng)格的導(dǎo)航菜單效果代碼,涉及jquery鼠標(biāo)事件操作頁面元素的遍歷與樣式動(dòng)態(tài)修改技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08jquery獲取對(duì)象的方法足以應(yīng)付常見的各種類型的對(duì)象
獲取對(duì)象是比較常見的操作了,因?yàn)橄胍僮饕粋€(gè)對(duì)象之前,一定要先獲取,這是必須的,下面整理了常見對(duì)象的獲取方法,希望對(duì)大家有所幫助2014-05-05自己使用jquery寫的一個(gè)無縫滾動(dòng)的插件
這篇文章主要介紹的是自己使用jquery寫的一個(gè)無縫滾動(dòng)的插件,個(gè)人感覺還不錯(cuò),需要的朋友可以參考下2014-04-04基于jQuery.i18n實(shí)現(xiàn)web前端的國際化
這篇文章主要介紹了基于jQuery.i18n實(shí)現(xiàn)web前端的國際化,具有很好的參考價(jià)值,希望對(duì)大家有所幫助2018-05-05