suchen

Heim >Web-Frontend >js-Tutorial >jquery implementiert abschließbare Countdown-Werbe-Spezialeffekte code_jquery

jquery implementiert abschließbare Countdown-Werbe-Spezialeffekte code_jquery

WBOY
WBOYOriginal
2016-05-16 15:40:571267Durchsuche

Das Beispiel in diesem Artikel beschreibt die Implementierung des Spezialeffektcodes für schließbare Countdown-Anzeigen mithilfe von JQuery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist eine Countdown-Anzeige, die der am Anfang beim Abspielen eines Videos ähnelt. Sie können den Videoinhalt erst nach der Werbezeit sehen. Es handelt sich um einen kleinen JS-Anzeigencode mit einer Schaltfläche zum Schließen in der oberen rechten Ecke Die verbleibende Zeit des Countdowns wird in der oberen linken Ecke angezeigt. Umfassende Implementierung, Webseiten-Spezialeffekte, die mit allen gängigen Browsern kompatibel sind. Ich hoffe, es gefällt euch allen.

Schauen wir uns die Screenshots des Laufeffekts an:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt: 

<!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>

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript-Beispielcode zur Bestimmung der Differenz zwischen zwei Datumsangaben:_Uhrzeit und DatumNächster Artikel：JavaScript-Beispielcode zur Bestimmung der Differenz zwischen zwei Datumsangaben:_Uhrzeit und Datum

In Verbindung stehende Artikel

Mehr sehen