jquery實(shí)現(xiàn)可關(guān)閉的倒計(jì)時(shí)廣告特效代碼
本文實(shí)例講述了jquery實(shí)現(xiàn)可關(guān)閉的倒計(jì)時(shí)廣告特效代碼。分享給大家供大家參考。具體如下:
這是一款類似播放視頻時(shí)候最開始的倒計(jì)時(shí)廣告,廣告時(shí)間結(jié)束才能看到視頻內(nèi)容,一個(gè)JS小貼片廣告代碼,右上角帶關(guān)閉按鈕,左上角顯示倒計(jì)時(shí)剩余時(shí)間,運(yùn)行jQuery代碼綜合實(shí)現(xiàn),CSS和HTML共同結(jié)合的網(wǎng)頁特效,兼容各主流瀏覽器,本效果是從門戶網(wǎng)站上整理而來。希望大家喜歡。
先來看看運(yù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> <!--代碼開始--> <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>
希望本文所述對大家的jquery程序設(shè)計(jì)有所幫助。
- jQuery倒計(jì)時(shí)代碼(超簡單)
- jquery實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼的倒計(jì)時(shí)代碼
- jquery簡單倒計(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)商品活動倒計(jì)時(shí)
- JS/jquery實(shí)現(xiàn)一個(gè)網(wǎng)頁內(nèi)同時(shí)調(diào)用多個(gè)倒計(jì)時(shí)的方法
- jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能完整示例
相關(guān)文章
用Jquery.load載入頁面后樣式?jīng)]了頁面混亂的解決方法
一直想用jquery.load的方法載入新的頁面,以實(shí)現(xiàn)局部刷新,結(jié)果發(fā)現(xiàn)樣式?jīng)]了,后來發(fā)現(xiàn)了解決方法,如果不過濾掉一些內(nèi)容的話,直接加載,會使頁面混亂的2014-10-10詳解JavaScript異步編程中jQuery的promise對象的作用
這篇文章主要介紹了JavaScript異步編程中jQuery的promise對象的作用,同時(shí)也談到了js的Dojo框架中promise模式的實(shí)現(xiàn),需要的朋友可以參考下2016-05-05jQuery圖片縮放插件smartZoom使用實(shí)例詳解
本文通過實(shí)例代碼給大家簡單介紹了jQuery圖片縮放插件smartZoom使用以及遇到問題的解決方法,非常不錯,具有參考借鑒價(jià)值,需要的朋友參考下吧2017-08-08使用jQuery的load方法設(shè)計(jì)動態(tài)加載及解決被加載頁面js失效問題
這篇文章主要介紹了使用jQuery的load方法設(shè)計(jì)動態(tài)加載及解決被加載頁面js失效問題,非常不錯,具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03jQuery元素屬性操作實(shí)例(設(shè)置、獲取及刪除元素屬性)
這篇文章主要介紹了jQuery元素屬性操作的方法,結(jié)合實(shí)例形式分析了jQuery針對頁面元素的設(shè)置、獲取及刪除等操作相關(guān)技巧,需要的朋友可以參考下2016-09-09JQuery插件iScroll實(shí)現(xiàn)下拉刷新,滾動翻頁特效
下拉自動加載進(jìn)行分頁的運(yùn)用越來越多,比起傳統(tǒng)的分頁該方法分頁用戶體驗(yàn)更好,布局也更簡單了。目前正在使用和學(xué)習(xí)中……2014-06-06