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)根據(jù)瀏覽器窗口大小自動縮放圖片的方法
這篇文章主要介紹了jquery實現(xiàn)根據(jù)瀏覽器窗口大小自動縮放圖片的方法,涉及jquery操作頁面元素屬性與樣式的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07基于jQuery.i18n實現(xiàn)web前端的國際化
這篇文章主要介紹了基于jQuery.i18n實現(xiàn)web前端的國際化,具有很好的參考價值,希望對大家有所幫助2018-05-05