jQuery implémente un code d'effets spéciaux publicitaires évolutif en haut de la page d'accueil_jquery

Introduction aux effets spéciaux

Le code publicitaire en haut de la page d'accueil du sac de blé imite le code publicitaire jQuery pour la publicité rétractable en haut de la page d'accueil du sac de blé. Une fois la page chargée, l'affichage de l'annonce sera automatiquement agrandi après 2,5 secondes et le contenu de la page s'étendra automatiquement vers le bas. Il se rétractera automatiquement après 8,5 secondes et s'affichera en petite taille.

Photo de démonstration

Comment utiliser

1. Copiez le style CSS suivant en tête de votre code HTML :

Copier le code Le code est le suivant :

2. Copiez le code suivant en haut de la page entière, c'est-à-dire sous le .

<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. Analyse du code 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毫秒)之后，大广告收回，小广告展开。
}

Télécharger depuis ce site Adresse de démonstration

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.