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

WBOY
Lepaskan: 2016-05-16 16:03:59
asal
1977 orang telah melayarinya

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:


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

<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>
Salin selepas log masuk

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毫秒)之后,大广告收回,小广告展开。
}

Salin selepas log masuk

Muat turun dari tapak ini Alamat demo

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan