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:
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.
