jquery melaksanakan kod_jquery pengiklanan undur yang boleh ditutup kesan khas-tutorial js-php.cn

jquery melaksanakan kod_jquery pengiklanan undur yang boleh ditutup kesan khas

WBOY

Lepaskan： 2016-05-16 15:40:57

asal

1273 orang telah melayarinya

Contoh dalam artikel ini menerangkan pelaksanaan kod kesan khas iklan kira detik yang boleh ditutup menggunakan jquery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah iklan hitung detik yang serupa dengan iklan pada permulaan apabila memainkan video Anda hanya boleh melihat kandungan video selepas masa iklan. Ia adalah kod iklan kecil dengan butang tutup di sudut kanan atas baki masa kira detik dipaparkan di sudut kiri atas Jalankan kod jQuery, kesan khas halaman web yang menggabungkan CSS dan HTML adalah serasi dengan semua pelayar utama. Harap anda semua menyukainya.

Mari kita lihat tangkapan skrin kesan larian:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

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

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.