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 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
jquery图形密码实现方法
Mar 11 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
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 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
python基础教程之获取本机ip数据包示例
2014/02/10 Python
跟老齐学Python之一个免费的实验室
2014/09/14 Python
Python sys.argv用法实例
2015/05/28 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
python数据封装json格式数据
2018/03/04 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
蔻驰美国官网:COACH美国
2016/08/18 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
网络专业学生个人的自我评价
2013/12/16 职场文书
初三化学教学反思
2014/01/23 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB