jQuery implementiert skalierbaren Werbe-Spezialeffektcode oben in homepage_jquery

Einführung in Spezialeffekte

Der Werbecode oben auf der Wheat Bag-Homepage imitiert den jQuery-Werbecode für die einziehbare Werbung oben auf der Wheat Bag-Homepage. Nach dem Laden der Seite wird die Anzeigendarstellung nach 2,5 Sekunden automatisch vergrößert und der Seiteninhalt automatisch nach unten erweitert. Es wird nach 8,5 Sekunden automatisch eingefahren und in kleiner Größe angezeigt.

Demobild

Anwendung

1. Kopieren Sie den folgenden CSS-Stil in den Kopf Ihres HTML:

Code kopieren Der Code lautet wie folgt:

2. Kopieren Sie den folgenden Code an den oberen Rand der gesamten Seite, also unter den .

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

Von dieser Seite herunterladen Demo-Adresse

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.