jquery实现可关闭的倒计时广告特效代码


Posted in Javascript onSeptember 02, 2015

本文实例讲述了jquery实现可关闭的倒计时广告特效代码。分享给大家供大家参考。具体如下:

这是一款类似播放视频时候最开始的倒计时广告,广告时间结束才能看到视频内容,一个JS小贴片广告代码,右上角带关闭按钮,左上角显示倒计时剩余时间,运行jQuery代码综合实现,CSS和HTML共同结合的网页特效,兼容各主流浏览器,本效果是从门户网站上整理而来。希望大家喜欢。

先来看看运行效果截图:

jquery实现可关闭的倒计时广告特效代码

在线演示地址如下:

具体代码如下:

<!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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
可以将word转成html的js代码
Apr 11 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 #Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 #Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 #Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 #Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 #Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 #Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 #Javascript
You might like
php中的比较运算符详解
2013/10/28 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
python 实现堆排序算法代码
2012/06/05 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
夜大自我鉴定
2013/10/31 职场文书
美国留学经济担保书
2014/05/20 职场文书
幼师自荐信范文
2015/03/06 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书