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