jQuery implements scalable advertising special effects code at the top of the homepage_jquery

Introduction to special effects

The advertising code at the top of the wheat bag homepage imitates the jQuery advertising code for the retractable advertisement at the top of the wheat bag homepage. After the page is loaded, the ad display will be automatically enlarged after 2.5 seconds, and the page content will automatically extend downwards. It will automatically retract after 8.5 seconds and display in small size.

Demo picture

How to use

1. Copy the following CSS style to the head of your html:

Copy code The code is as follows:

2. Copy the following code to the top of the entire page, that is, below the .

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

Download from this site Demo address

The above is the entire content of this article, I hope you all like it.