jquery實(shí)現(xiàn)可關(guān)閉的倒計(jì)時(shí)廣告特效代碼
本文實(shí)例講述了jquery實(shí)現(xiàn)可關(guān)閉的倒計(jì)時(shí)廣告特效代碼。分享給大家供大家參考。具體如下:
這是一款類(lèi)似播放視頻時(shí)候最開(kāi)始的倒計(jì)時(shí)廣告,廣告時(shí)間結(jié)束才能看到視頻內(nèi)容,一個(gè)JS小貼片廣告代碼,右上角帶關(guān)閉按鈕,左上角顯示倒計(jì)時(shí)剩余時(shí)間,運(yùn)行jQuery代碼綜合實(shí)現(xiàn),CSS和HTML共同結(jié)合的網(wǎng)頁(yè)特效,兼容各主流瀏覽器,本效果是從門(mén)戶(hù)網(wǎng)站上整理而來(lái)。希望大家喜歡。
先來(lái)看看運(yùn)行效果截圖:
在線(xiàn)演示地址如下:
http://demo.jb51.net/js/2015/jquery-close-time-adv-style-codes/
具體代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>js貼片倒計(jì)時(shí)代碼</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> <!--代碼開(kāi)始--> <div class="box"> <div class="ad"><a href="#" target="_blank"><img src="images/ad.jpg" /></a></div> <div class="ad_time">時(shí)間還剩<span id="t">50</span>秒</div> <div class="close"></div> </div> <div class="btn">點(diǎn)擊顯示效果</div> <!--代碼結(jié)束--> </body> </html>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
- jQuery倒計(jì)時(shí)代碼(超簡(jiǎn)單)
- jquery實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼的倒計(jì)時(shí)代碼
- jquery簡(jiǎn)單倒計(jì)時(shí)實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)發(fā)送驗(yàn)證碼并60秒倒計(jì)時(shí)功能
- 利用jQuery實(shí)現(xiàn)漂亮的圓形進(jìn)度條倒計(jì)時(shí)插件
- jquery 倒計(jì)時(shí)效果實(shí)現(xiàn)秒殺思路
- jQuery 點(diǎn)擊獲取驗(yàn)證碼按鈕及倒計(jì)時(shí)功能
- jQuery 實(shí)現(xiàn)倒計(jì)時(shí)天,時(shí),分,秒功能
- jQuery實(shí)現(xiàn)商品活動(dòng)倒計(jì)時(shí)
- JS/jquery實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)內(nèi)同時(shí)調(diào)用多個(gè)倒計(jì)時(shí)的方法
- jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能完整示例
相關(guān)文章
jquery中使用ajax獲取遠(yuǎn)程頁(yè)面信息
當(dāng)我們點(diǎn)擊表格里面的標(biāo)題顯示相關(guān)的詳細(xì)信息,比如點(diǎn)擊新聞標(biāo)題顯示正文,而正文通常是在一個(gè)頁(yè)面里面,通過(guò)獲取傳遞的參數(shù)id查詢(xún)數(shù)據(jù)庫(kù),然后顯示出來(lái)2011-11-11用Jquery.load載入頁(yè)面后樣式?jīng)]了頁(yè)面混亂的解決方法
一直想用jquery.load的方法載入新的頁(yè)面,以實(shí)現(xiàn)局部刷新,結(jié)果發(fā)現(xiàn)樣式?jīng)]了,后來(lái)發(fā)現(xiàn)了解決方法,如果不過(guò)濾掉一些內(nèi)容的話(huà),直接加載,會(huì)使頁(yè)面混亂的2014-10-10詳解JavaScript異步編程中jQuery的promise對(duì)象的作用
這篇文章主要介紹了JavaScript異步編程中jQuery的promise對(duì)象的作用,同時(shí)也談到了js的Dojo框架中promise模式的實(shí)現(xiàn),需要的朋友可以參考下2016-05-05jQuery圖片縮放插件smartZoom使用實(shí)例詳解
本文通過(guò)實(shí)例代碼給大家簡(jiǎn)單介紹了jQuery圖片縮放插件smartZoom使用以及遇到問(wèn)題的解決方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-08-08使用jQuery的load方法設(shè)計(jì)動(dòng)態(tài)加載及解決被加載頁(yè)面js失效問(wèn)題
這篇文章主要介紹了使用jQuery的load方法設(shè)計(jì)動(dòng)態(tài)加載及解決被加載頁(yè)面js失效問(wèn)題,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03jQuery元素屬性操作實(shí)例(設(shè)置、獲取及刪除元素屬性)
這篇文章主要介紹了jQuery元素屬性操作的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素的設(shè)置、獲取及刪除等操作相關(guān)技巧,需要的朋友可以參考下2016-09-09JQuery插件iScroll實(shí)現(xiàn)下拉刷新,滾動(dòng)翻頁(yè)特效
下拉自動(dòng)加載進(jìn)行分頁(yè)的運(yùn)用越來(lái)越多,比起傳統(tǒng)的分頁(yè)該方法分頁(yè)用戶(hù)體驗(yàn)更好,布局也更簡(jiǎn)單了。目前正在使用和學(xué)習(xí)中……2014-06-06