jQuery melaksanakan kod kesan khas pengiklanan berskala di bahagian atas halaman utama_jquery

Pengenalan kepada kesan khas

Kod pengiklanan di bahagian atas halaman utama beg gandum meniru kod pengiklanan jQuery untuk iklan boleh tarik balik di bahagian atas halaman utama beg gandum. Selepas halaman dimuatkan, paparan iklan akan dibesarkan secara automatik selepas 2.5 saat, dan kandungan halaman akan memanjang ke bawah secara automatik. Ia akan ditarik balik secara automatik selepas 8.5 saat dan dipaparkan dalam saiz kecil.

Gambar demo

Cara menggunakan

1. Salin gaya CSS berikut ke kepala html anda:

Salin kod Kod adalah seperti berikut:

232c39bfbb1cec0972e448f6067a19b8

2. Salin kod berikut ke bahagian atas keseluruhan halaman, iaitu, di bawah 3c30aa6c4c72dd8ead30672a51b803a7.

<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. analisis kod js (js.js):

if ($("#js_ads_banner_top_slide").length){  //判断当前广告是否展开，如果没有，则执行下面代码
  var $slidebannertop = $("#js_ads_banner_top_slide"),$bannertop = $("#js_ads_banner_top");
  setTimeout(function(){$bannertop.slideUp(1000);$slidebannertop.slideDown(1000);},2500); //2500毫秒(2.5秒)后，小广告收回，大广告伸开，执行时间都是1秒(1000毫秒)
  setTimeout(function(){$slidebannertop.slideUp(1000,function (){$bannertop.slideDown(1000);});},8500); //8.5秒(8500毫秒)之后，大广告收回，小广告展开。
}

Muat turun dari tapak ini Alamat demo

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.