基于JQuery實(shí)現(xiàn)頁(yè)面定時(shí)彈出廣告
Js相關(guān)技術(shù)
定時(shí)器:
setInterval & clearInterval
setTimeout & clearTimeout
顯示: img.style.display = "block"
隱藏: img.style.display = "none"
img 對(duì)象
style屬性: style對(duì)象
需求分析
當(dāng)用戶打開界面，3秒鐘之后彈出廣告，這個(gè)廣告顯示5秒鐘，隱藏廣告
技術(shù)分析
定時(shí)器: setTimeout
顯示和隱藏: style.display = "block/none"
步驟分析：
- 導(dǎo)入JQ的文件
- 編寫JQ的文檔加載事件
- 啟動(dòng)定時(shí)器 setTimeout("",3000);
- 編寫顯示廣告的函數(shù)
- 在顯示廣告里面再啟動(dòng)一個(gè)定時(shí)器
- 編寫隱藏廣告的函數(shù)
代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<!--
1. 導(dǎo)入JQ的文件
2. 編寫JQ的文檔加載事件
3. 啟動(dòng)定時(shí)器 setTimeout("",3000);
4. 編寫顯示廣告的函數(shù)
5. 在顯示廣告里面再啟動(dòng)一個(gè)定時(shí)器
6. 編寫隱藏廣告的函數(shù)
-->
<script>
//顯示廣告
function showAd(){
$("#img1").slideDown(2000);
setTimeout("hideAd()",3000);
}
//隱藏廣告
function hideAd(){
$("#img1").slideUp(2000);
}
$(function(){
setTimeout("showAd()",3000);
});
</script>
</head>
<body>
<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" id="img1" width="100%" style="display:none" />
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jq實(shí)現(xiàn)左滑顯示刪除按鈕,點(diǎn)擊刪除實(shí)現(xiàn)刪除數(shù)據(jù)功能(推薦)
下面小編就為大家?guī)硪黄猨q實(shí)現(xiàn)左滑顯示刪除按鈕,點(diǎn)擊刪除實(shí)現(xiàn)刪除數(shù)據(jù)功能(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
jQuery 開發(fā)者應(yīng)該注意的9個(gè)錯(cuò)誤
jQuery 開發(fā)者應(yīng)該注意的9個(gè)錯(cuò)誤,使用jquery的朋友可以參考下2012-05-05
jquery+CSS實(shí)現(xiàn)的水平布局多級(jí)網(wǎng)頁(yè)菜單效果
這篇文章主要介紹了jquery+CSS實(shí)現(xiàn)的水平布局多級(jí)網(wǎng)頁(yè)菜單效果,涉及jquery頁(yè)面元素屬性動(dòng)態(tài)變換效果實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
jQuery使用fadeout實(shí)現(xiàn)元素漸隱效果的方法
這篇文章主要介紹了jQuery使用fadeout實(shí)現(xiàn)元素漸隱效果的方法,實(shí)例分析了jQuery中fadeout方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
本文主要介紹了使用jQuery操作DOM的方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
利用jquery和BootStrap實(shí)現(xiàn)動(dòng)態(tài)滾動(dòng)條效果
這篇文章主要介紹了利用jquery和BootStrap實(shí)現(xiàn)動(dòng)態(tài)滾動(dòng)條效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
jquery ajax提交表單數(shù)據(jù)的兩種方式
貌似AJAX越來越火了，作為一個(gè)WEB程序開發(fā)者要是不會(huì)這個(gè)感覺就要落伍，甚至有可能在求職的時(shí)候?qū)冶惶蕴?。我也是一個(gè)WEB程序開發(fā)者，當(dāng)然我也要“隨波逐流”一把，不然飯碗不保??！2009-11-11
基于jquery實(shí)現(xiàn)的一個(gè)選擇中國(guó)大學(xué)的彈框 (數(shù)據(jù)、步驟、代碼)
基于jquery實(shí)現(xiàn)的一個(gè)選擇中國(guó)大學(xué)的彈框，需要的朋友可以參考下2012-07-07
使用JQuery庫(kù)提供的擴(kuò)展功能實(shí)現(xiàn)自定義方法
如何沒有任何一個(gè)庫(kù)可以滿足所有的需求，可以使用JQuery庫(kù)提供的擴(kuò)展功能，下面有個(gè)示例，大家可以看看2014-09-09
基于jQuery實(shí)現(xiàn)的圖片切換焦點(diǎn)圖整理
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的圖片切換焦點(diǎn)圖整理,需要的朋友可以參考下2014-12-12