집 >웹 프론트엔드 >JS 튜토리얼 >jquery는 닫을 수 있는 카운트다운 광고 특수 효과를 구현합니다.

jquery는 닫을 수 있는 카운트다운 광고 특수 효과를 구현합니다.

WBOY원래의: 2016-05-16 15:40:571264검색

이 문서의 예에서는 jquery를 사용하여 닫을 수 있는 카운트다운 광고 특수 효과 코드를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

동영상 재생 시 처음에 나오는 카운트다운 광고입니다. 광고 시간 이후에만 동영상 콘텐츠를 볼 수 있습니다. 오른쪽 상단에 닫기 버튼이 있는 작은 JS 광고 코드입니다. 남은 카운트다운 시간은 왼쪽 상단에 표시됩니다. jQuery 코드를 실행하면 CSS와 HTML을 결합한 웹 페이지 특수 효과가 모든 주류 브라우저와 호환됩니다. 모두가 좋아하길 바랍니다.

런닝 효과의 스크린샷을 살펴보겠습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/jquery-close-time-adv-style-codes/

구체적인 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>js贴片倒计时代码</title>
<style>
*{padding:0;margin:0; font-size:12px;}
ol,ul,li{list-style:none}
img{border:none}
.box{ width:564px; height:361px; margin:20px auto; position:relative; display:none;}
.ad_time{ width:554px; height:351px; background:#000; filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5; padding:5px; position:absolute; top:0; left:0; color:#fff;}
.ad_time span{ font-weight:bold; color:#cc0; padding:0 5px;}
.close{ width:49px; height:20px; background:url(images/close.png) no-repeat; position:absolute; top:0; right:0; cursor:pointer;}
.btn{ width:100px; height:30px; background:#eee; border:1px solid #ddd; font:normal 12px/30px '寰蒋闆呴粦'; text-align:center; margin:20px auto; cursor:pointer;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js" language="javascript"></script>
<script type="text/javascript" language="javascript">
function lxfEndtime(){
 $t=$('#t').html();
 if($t!=0){
  $('#t').html($t-1);
  $i=setTimeout("lxfEndtime()",1000);
 }else{  
  $('.box').hide();
  $('.btn').show();
  $('#t').html(6);
  $('.ad_time').css({'width':'554px','height':'351px'});
  clearTimeout($i);
 }
};
$(document).ready(function(){
 $('.btn').live('click',function(){
  $('.box').show();
  $(this).hide(); 
  $('.ad_time').animate({width:110,height:18},'slow');
  lxfEndtime();
 })
 $('.close').click(function(){
  $('.box').hide();
  $('.btn').show();
  $('#t').html(6);
  $('.ad_time').css({'width':'554px','height':'351px'});
  clearTimeout($i);
 })
});
</script>
</head>
<body>
<!--代码开始-->
<div class="box">
 <div class="ad"><a href="#" target="_blank"><img src="images/ad.jpg" /></a></div>
 <div class="ad_time">时间还剩<span id="t">50</span>秒</div>
 <div class="close"></div>
</div>
<div class="btn">点击显示效果</div>
<!--代码结束-->
</body>
</html>

이 기사가 모든 사람의 jquery 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：두 개의 날짜_시간과 날짜 간의 차이를 확인하는 JavaScript 샘플 코드다음 기사：두 개의 날짜_시간과 날짜 간의 차이를 확인하는 JavaScript 샘플 코드

jquery는 닫을 수 있는 카운트다운 광고 특수 효과를 구현합니다.

관련 기사