jquery实现可关闭的倒计时广告特效代码_jquery
本文实例讲述了jquery实现可关闭的倒计时广告特效代码。分享给大家供大家参考。具体如下：
这是一款类似播放视频时候最开始的倒计时广告，广告时间结束才能看到视频内容，一个JS小贴片广告代码，右上角带关闭按钮，左上角显示倒计时剩余时间，运行jQuery代码综合实现，CSS和HTML共同结合的网页特效，兼容各主流浏览器，本效果是从门户网站上整理而来。希望大家喜欢。
先来看看运行效果截图：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-close-time-adv-style-codes/
具体代码如下：
<!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="/static/imghw/default1.png" data-src="images/ad.jpg" class="lazy" / alt="jquery实现可关闭的倒计时广告特效代码_jquery" ></a></div>
<div class="ad_time">时间还剩<span id="t">50</span>秒</div>
<div class="close"></div>
</div>
<div class="btn">点击显示效果</div>
<!--代码结束-->
</body>
</html>希望本文所述对大家的jquery程序设计有所帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
360浏览器推荐的广告如何关闭？如何关闭电脑360浏览器推荐的广告？
Mar 14, 2024 am 09:16 AM
360浏览器推荐的广告如何关闭？相信很多的用户们都在使用360浏览器，不过这款浏览器有时候会弹出广告，这就使得很多的用户们都十分的苦恼，下面就让本站来为用户们来仔细的介绍一下如何关闭电脑360浏览器推荐的广告吧。 如何关闭电脑360浏览器推荐的广告？ 方法一： 1、打开360安全浏览器。 2、找到右上角“三横杠”标志，点击【设置】。 3、在弹出的界面左侧任务栏中找到【实验室】，勾选【启用“360热点资讯”功能】即可。 方法二： 1、首先双击
朋友圈广告怎么彻底关掉
Mar 03, 2024 pm 12:31 PM
用户在刷朋友圈的时候会遇到很多的广告，那么广告怎么彻底关掉呢？用户们需要在我的里点击设置，然后找到个人信息与权限，然后点击个性化广告管理，将广告个性化关闭就行。这篇朋友圈广告彻底关掉方法介绍就能告诉大家具体的操作方法，赶紧看看吧！微信使用教程朋友圈广告怎么彻底关掉答：无法彻底关掉，只能关掉个性化推荐具体方法：1、首先点击我，然后找到里面的设置。2、找到个人信息与权限选项。3、点击里面的个性化广告管理功能。4、点击广告个性化右侧的开关，关闭就可以了。怎么关闭广告：1、找到朋友圈里的广告。2、点击右
新版Edge如何关闭广告？屏蔽Edge个性化广告的方法
Mar 14, 2024 am 11:37 AM
很多用户更新Edge浏览器之后，发现界面上多了很多的广告，比如新标签页的底部有多个网站的链接还标注广告字样，看起来非常烦人。那有什么办法可以关闭Edge浏览器个性化广告吗？小编在网上查找了很多办法，下面就分享给大家一个关闭广告的小技巧。 新版Edge如何关闭广告？ 1、打开Edge浏览器。 2、点击右上角的【•••】。 3、点击【设置】。 4、点击【隐私、搜索和服务】。 5、关闭”个性化你的web体验“右侧的开关，即可关闭微软推送的个性
jQuery中如何使用PUT请求方式？
Feb 28, 2024 pm 03:12 PM
jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u
抖音怎么关闭广告智能推荐
Mar 22, 2024 pm 04:06 PM
在我们平时使用抖音进行娱乐的时候，经常会因为一些莫名奇怪的广告，打扰到我们正在休闲时的体验，让很多用户们都不受其扰，想要关闭这些广告的推荐推送，却不知道究竟该如何操作，那么本站小编就为大家带来这篇教程攻略就将为大家带来这篇详细的内容介绍，希望能帮助到各位有需要的小伙伴们。首先我们先在都有的app设置中，找到了解与管理广告推送的选项然后看到下方的所有与广告相关的开关选项，点击后方的开关进行关闭随后跳出关闭广告确认提示，我们点击确认即可关闭广告
jQuery小技巧：快速修改页面所有a标签的文本
Feb 28, 2024 pm 09:06 PM
标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：<
win10开机10秒倒计时怎么取消? Win10取消开机倒计时的三种方法
Feb 29, 2024 pm 07:25 PM
在win10中，开机倒数默认是启用的。当我们在开机之后，会看到一个倒数计时的界面，通常是10秒的倒数。在这个时间之内，我们可以选择是否继续开机或者进行一些其它的操作。虽然开机倒数为我们的系统带来了些许便利，但在一些情况下也可能带来麻烦。想取消显示，但是不知道怎么操作，这篇文章是本站给大家带来的Win10开机几秒倒计时取消方法。了解win10开机倒数在win10中，开机倒数默认是启用的。当我们在开机之后，会看到一个倒数计时的界面，通常是10秒的倒数。在这个时间之内，我们可以选择是否继续开机或者进行
快手极速版总是弹出广告怎么关闭 快手极速版怎么关闭广告推送
Apr 01, 2024 pm 09:34 PM
快手极速版一直以来都是那么受大家的喜爱，每一天都能够刷大量的视频，都是在不断地更新，让大家随时随地都能看到这些精彩的视频内容，真的丰富多样，直接的解忧烦闷的，那么大家有些时候，老是碰到一些广告弹窗的，直接的影响到了大家看视频的观感，所以大家都是想要关闭这一广告弹窗，获得更为舒适的观看体验，不知道怎么操作的朋友，可以看看小编给你们带来的教程吧。快手极速版关闭广告推送的方法： 1.首先打开快手极速版软件，来到快手页面之后点击左上角的【三横】图标； 2.然后在当前的页面点击【设置】； 3.进
