Heim Web-Frontend js-Tutorial jquery implementiert abschließbare Countdown-Werbe-Spezialeffekte code_jquery

jquery implementiert abschließbare Countdown-Werbe-Spezialeffekte code_jquery

May 16, 2016 pm 03:40 PM
jquery 倒计时 可关闭 广告

Das Beispiel in diesem Artikel beschreibt die Implementierung des Spezialeffektcodes für schließbare Countdown-Anzeigen mithilfe von JQuery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist eine Countdown-Anzeige, die der am Anfang beim Abspielen eines Videos ähnelt. Sie können den Videoinhalt erst nach der Werbezeit sehen. Es handelt sich um einen kleinen JS-Anzeigencode mit einer Schaltfläche zum Schließen in der oberen rechten Ecke Die verbleibende Zeit des Countdowns wird in der oberen linken Ecke angezeigt. Umfassende Implementierung, Webseiten-Spezialeffekte, die mit allen gängigen Browsern kompatibel sind. Ich hoffe, es gefällt euch allen.

Schauen wir uns die Screenshots des Laufeffekts an:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt:

<!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>
Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie schalte ich die vom 360 Browser empfohlenen Anzeigen aus? Wie deaktiviere ich die vom 360-Browser empfohlenen Anzeigen auf dem PC? Wie schalte ich die vom 360 Browser empfohlenen Anzeigen aus? Wie deaktiviere ich die vom 360-Browser empfohlenen Anzeigen auf dem PC? Mar 14, 2024 am 09:16 AM

Wie schalte ich die vom 360 Browser empfohlenen Anzeigen aus? Ich glaube, dass viele Benutzer den 360-Browser verwenden, aber dieser Browser zeigt manchmal Werbung an, was viele Benutzer sehr verunsichert. Lassen Sie diese Website den Benutzern sorgfältig erklären, wie Sie die vom 360-Browser empfohlenen Anzeigen auf Ihrem Computer deaktivieren können. Wie schalte ich die vom 360-Browser empfohlenen Anzeigen auf Ihrem Computer aus? Methode 1: 1. Öffnen Sie den 360 Safe Browser. 2. Suchen Sie das Logo „drei horizontale Balken“ in der oberen rechten Ecke und klicken Sie auf [Einstellungen]. 3. Suchen Sie in der Taskleiste auf der linken Seite der Popup-Oberfläche nach [Lab] und aktivieren Sie die Funktion „360-Hotspot-Informationen aktivieren“. Methode 2: 1. Erster Doppelklick

So deaktivieren Sie Anzeigen in Moments vollständig So deaktivieren Sie Anzeigen in Moments vollständig Mar 03, 2024 pm 12:31 PM

Benutzer werden beim Durchsuchen von Moments auf jede Menge Werbung stoßen. Wie können sie die Werbung also vollständig ausschalten? Benutzer müssen unter „Mein“ auf „Einstellungen“ klicken, dann „Persönliche Informationen und Berechtigungen“ finden, dann auf „Verwaltung personalisierter Anzeigen“ klicken und einfach die Anzeigenpersonalisierung deaktivieren. In diesem Artikel erfahren Sie, wie Sie Werbung in Moments vollständig deaktivieren. Schauen Sie also mal vorbei! Tutorial zur WeChat-Nutzung: Wie kann ich Anzeigen in Moments vollständig deaktivieren? Sie können nur personalisierte Empfehlungen deaktivieren: 1. Klicken Sie zuerst auf „Ich“ und suchen Sie dann nach den Einstellungen. 2. Suchen Sie nach den Optionen für persönliche Informationen und Berechtigungen. 3. Klicken Sie im Inneren auf die personalisierte Werbeverwaltungsfunktion. 4. Klicken Sie auf den Schalter auf der rechten Seite der Anzeigenpersonalisierung und schalten Sie ihn aus. So deaktivieren Sie Werbung: 1. Suchen Sie die Werbung in Moments. 2. Klicken Sie rechts

Wie schalte ich Werbung in der neuen Version von Edge aus? So blockieren Sie personalisierte Edge-Anzeigen Wie schalte ich Werbung in der neuen Version von Edge aus? So blockieren Sie personalisierte Edge-Anzeigen Mar 14, 2024 am 11:37 AM

Nach der Aktualisierung des Edge-Browsers stellten viele Benutzer fest, dass auf der Benutzeroberfläche viele Anzeigen zu sehen waren. Beispielsweise befanden sich unten auf der Seite „Neuer Tab“ Links zu mehreren Websites und das Wort „Anzeigen“ war markiert, was sehr nervig aussah. Gibt es eine Möglichkeit, personalisierte Werbung im Edge-Browser zu deaktivieren? Der Herausgeber hat viele Methoden im Internet durchsucht und ich werde Ihnen einen kleinen Trick zum Deaktivieren von Anzeigen vorstellen. Wie schalte ich Werbung in der neuen Version von Edge aus? 1. Öffnen Sie den Edge-Browser. 2. Klicken Sie auf [•••] in der oberen rechten Ecke. 3. Klicken Sie auf [Einstellungen]. 4. Klicken Sie auf [Datenschutz, Suche und Dienste]. 5. Deaktivieren Sie den Schalter auf der rechten Seite von „Personalisieren Sie Ihr Web-Erlebnis“, um die von Microsoft vorangetriebene Personalisierung zu deaktivieren.

Wie verwende ich die PUT-Anfragemethode in jQuery? Wie verwende ich die PUT-Anfragemethode in jQuery? Feb 28, 2024 pm 03:12 PM

Wie verwende ich die PUT-Anfragemethode in jQuery? In jQuery ähnelt die Methode zum Senden einer PUT-Anfrage dem Senden anderer Arten von Anfragen, Sie müssen jedoch auf einige Details und Parametereinstellungen achten. PUT-Anfragen werden normalerweise zum Aktualisieren von Ressourcen verwendet, beispielsweise zum Aktualisieren von Daten in einer Datenbank oder zum Aktualisieren von Dateien auf dem Server. Das Folgende ist ein spezifisches Codebeispiel, das die PUT-Anforderungsmethode in jQuery verwendet. Stellen Sie zunächst sicher, dass Sie die jQuery-Bibliotheksdatei einschließen. Anschließend können Sie eine PUT-Anfrage senden über: $.ajax({u

So deaktivieren Sie intelligente Werbeempfehlungen auf Douyin So deaktivieren Sie intelligente Werbeempfehlungen auf Douyin Mar 22, 2024 pm 04:06 PM

Wenn wir Douyin normalerweise zur Unterhaltung nutzen, haben wir oft unerklärliche und seltsame Werbung, die unser Freizeiterlebnis stört. Viele Benutzer stören sich nicht daran und möchten den Empfehlungsschub dieser Werbung abschalten, aber das tun sie nicht Wie man es bedient, stellt Ihnen der Herausgeber dieser Website dieses Tutorial und diese ausführliche Einführung zur Verfügung, in der Hoffnung, allen Bedürftigen zu helfen. Zuerst finden wir in den App-Einstellungen zunächst die Option, Ad-Push zu verstehen und zu verwalten, dann sehen wir unten alle werbebezogenen Schalteroptionen, klicken auf den Schalter auf der Rückseite, um ihn auszuschalten, und dann eine Bestätigungsaufforderung, um die Werbung auszuschalten wird angezeigt. Klicken Sie zum Bestätigen auf „Anzeigen schließen“.

jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite Feb 28, 2024 pm 09:06 PM

Titel: jQuery-Tipps: Ändern Sie schnell den Text aller Tags auf der Seite. In der Webentwicklung müssen wir häufig Elemente auf der Seite ändern und bedienen. Wenn Sie jQuery verwenden, müssen Sie manchmal den Textinhalt aller a-Tags auf der Seite gleichzeitig ändern, was Zeit und Energie sparen kann. Im Folgenden wird erläutert, wie Sie mit jQuery den Text aller Tags auf der Seite schnell ändern können, und es werden spezifische Codebeispiele angegeben. Zuerst müssen wir die jQuery-Bibliotheksdatei einführen und sicherstellen, dass der folgende Code in die Seite eingefügt wird: &lt

Wie kann ich den 10-Sekunden-Countdown beim Hochfahren von Win10 abbrechen? Drei Möglichkeiten, den Countdown beim Hochfahren von Win10 abzubrechen Wie kann ich den 10-Sekunden-Countdown beim Hochfahren von Win10 abbrechen? Drei Möglichkeiten, den Countdown beim Hochfahren von Win10 abzubrechen Feb 29, 2024 pm 07:25 PM

In Win10 ist der Boot-Countdown standardmäßig aktiviert. Wenn wir den Computer einschalten, sehen wir eine Countdown-Oberfläche, normalerweise einen 10-Sekunden-Countdown. Innerhalb dieser Zeit können wir wählen, ob wir mit dem Booten fortfahren oder andere Vorgänge ausführen möchten. Obwohl der Boot-Countdown unserem System eine gewisse Bequemlichkeit bringt, kann er in manchen Fällen auch zu Problemen führen. Ich möchte die Anzeige abbrechen, weiß aber nicht, wie das geht. In diesem Artikel erfahren Sie, wie Sie den Countdown von mehreren Sekunden nach dem Hochfahren von Win10 abbrechen. Verstehen Sie den Boot-Countdown von Win10. In Win10 ist der Boot-Countdown standardmäßig aktiviert. Wenn wir den Computer einschalten, sehen wir eine Countdown-Oberfläche, normalerweise einen 10-Sekunden-Countdown. Innerhalb dieser Zeit können wir wählen, ob wir mit dem Booten fortfahren oder fortfahren möchten

Wie deaktiviere ich Anzeigen, die in der Kuaishou Express Edition immer erscheinen? Wie deaktiviere ich Ad Push in der Kuaishou Express Edition? Wie deaktiviere ich Anzeigen, die in der Kuaishou Express Edition immer erscheinen? Wie deaktiviere ich Ad Push in der Kuaishou Express Edition? Apr 01, 2024 pm 09:34 PM

Die Kuaishou Express Edition erfreut sich seit jeher großer Beliebtheit. Sie kann jeden Tag eine große Anzahl an Videos ansehen, sodass jeder diese wunderbaren Videoinhalte jederzeit und überall sehen kann Sorgen und Langeweile lindern, manchmal stößt jeder auf Werbe-Popups, die sich direkt auf die Wahrnehmung aller beim Ansehen von Videos auswirken. Daher möchte jeder diese Werbe-Popups schließen, um ein angenehmeres Seherlebnis zu erzielen. Freunde, die nicht wissen, wie das geht Zur Bedienung können Sie sich das Tutorial ansehen, das ich Ihnen mitgebracht habe. So deaktivieren Sie den Werbe-Push in der Kuaishou Express Edition: 1. Öffnen Sie zunächst die Kuaishou Express Edition-Software, gehen Sie zur Kuaishou-Seite und klicken Sie auf das Symbol [drei horizontale Linien] in der oberen linken Ecke. 2. Klicken Sie dann auf [Einstellungen]. aktuelle Seite; 3. Geben Sie ein

See all articles