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

WBOY
풀어 주다: 2016-05-16 16:03:59
원래의
1978명이 탐색했습니다.

특수효과 소개

밀봉지 홈페이지 상단의 광고 코드는 밀봉지 홈페이지 상단의 개폐식 광고를 위한 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毫秒)之后,大广告收回,小广告展开。
}

로그인 후 복사

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

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿