jQuery는 홈페이지_jquery 상단에 확장 가능한 광고 특수 효과 코드를 구현합니다.

특수효과 소개

밀봉지 홈페이지 상단의 광고 코드는 밀봉지 홈페이지 상단의 개폐식 광고를 위한 jQuery 광고 코드를 모방한 것입니다. 페이지가 로드된 후 2.5초 후에 광고 표시가 자동으로 확대되고, 페이지 콘텐츠가 자동으로 아래쪽으로 확장됩니다. 8.5초 후에 자동으로 들어가 작은 크기로 표시됩니다.

데모사진

사용방법

1. 다음 CSS 스타일을 HTML 헤드에 복사하세요.

코드 복사 코드는 다음과 같습니다.

2. 전체 페이지 상단, 즉 아래에 다음 코드를 복사합니다.

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

이 사이트에서 다운로드 데모 주소

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.