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="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程式設計有所幫助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++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、先雙擊
新版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 03, 2024 pm 12:31 PM
用戶在刷朋友圈的時候會遇到很多的廣告，那麼廣告要怎麼徹底關掉呢？用戶需要在我的內部點擊設置，然後找到個人資訊與權限，然後點擊個人化廣告管理，將廣告個人化關閉就行。這篇朋友圈廣告徹底關掉方法介紹就能告訴大家具體的操作方法，趕快看看吧！微信使用教學朋友圈廣告怎麼徹底關掉答案：無法徹底關掉，只能關掉個人化推薦具體方法：1、先點擊我，然後找到裡面的設定。 2、找到個人資訊與權限選項。 3.點擊裡面的個人化廣告管理功能。 4.點選廣告個人化右側的開關，關機就可以了。怎麼關閉廣告：1、找到朋友圈的廣告。 2、點擊右
jQuery小技巧：快速修改頁面所有a標籤的文本
Feb 28, 2024 pm 09:06 PM
標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：<
使用jQuery修改所有a標籤的文字內容
Feb 28, 2024 pm 05:42 PM
標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：
win10開機10秒倒數計時怎麼取消? Win10取消開機倒數計時的三種方法
Feb 29, 2024 pm 07:25 PM
在win10中，開機倒數預設是啟用的。當我們在開機之後，會看到一個倒數計時的介面，通常是10秒的倒數。在這個時間之內，我們可以選擇是否繼續開機或進行一些它的操作。雖然開機倒數為我們的系統帶來了些許便利，但在某些情況下也可能帶來麻煩。想取消顯示，但不知道怎麼操作，這篇文章是本站帶給大家的Win10開機幾秒倒數取消方法。了解win10開機倒數在win10中，開機倒數預設是啟用的。當我們在開機之後，會看到一個倒數計時的介面，通常是10秒的倒數。在這個時間之內，我們可以選擇是否要繼續開機或進行
抖音怎麼關閉廣告智慧推薦
Mar 22, 2024 pm 04:06 PM
在我們平常使用抖音進行娛樂的時候，常常會因為一些莫名奇怪的廣告，打擾到我們正在休閒時的體驗，讓很多用戶們都不受其擾，想要關閉這些廣告的推薦推送，卻不知道究竟該如何操作，那麼本站小編就為大家帶來這篇教程攻略就將為大家帶來這篇詳細的內容介紹，希望能幫助到各位有需要的小伙伴們。首先我們先在都有的app設定中，找到了解與管理廣告推送的選項然後看到下方的所有與廣告相關的開關選項，點擊後方的開關進行關閉隨後跳出關閉廣告確認提示，我們點擊確認即可關閉廣告
