recherche

Maison >interface Web >js tutoriel >jquery implémente des effets spéciaux publicitaires avec compte à rebours fermable code_jquery

jquery implémente des effets spéciaux publicitaires avec compte à rebours fermable code_jquery

WBOY
WBOYoriginal
2016-05-16 15:40:571265parcourir

L'exemple de cet article décrit l'implémentation du code d'effets spéciaux publicitaires du compte à rebours fermable à l'aide de jquery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'une annonce de compte à rebours similaire à celle du début lors de la lecture d'une vidéo. Vous ne pouvez voir le contenu vidéo qu'après l'heure de l'annonce. Il s'agit d'un petit code d'annonce JS avec un bouton de fermeture dans le coin supérieur droit. le temps restant du compte à rebours est affiché dans le coin supérieur gauche. Exécutez le code jQuery. Implémentation complète, les effets spéciaux de page Web combinant CSS et HTML sont compatibles avec tous les navigateurs grand public. Cet effet est compilé à partir du site Web du portail. J'espère que vous l'aimerez tous.

Jetons un coup d'œil aux captures d'écran de l'effet de course :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant : 

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

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple de code JavaScript pour déterminer la différence entre deux dates_heure et dateArticle suivant：Exemple de code JavaScript pour déterminer la différence entre deux dates_heure et date

Articles Liés

Voir plus