基于JQuery實(shí)現(xiàn)頁面定時彈出廣告
更新時間：2020年05月08日 15:14:14 作者：朱李洛克
這篇文章主要介紹了基于JQuery實(shí)現(xiàn)頁面定時彈出廣告,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
Js相關(guān)技術(shù)
定時器:
setInterval & clearInterval
setTimeout & clearTimeout
顯示: img.style.display = "block"
隱藏: img.style.display = "none"
img 對象
style屬性: style對象
需求分析
當(dāng)用戶打開界面，3秒鐘之后彈出廣告，這個廣告顯示5秒鐘，隱藏廣告
技術(shù)分析
定時器: setTimeout
顯示和隱藏: style.display = "block/none"
步驟分析：
- 導(dǎo)入JQ的文件
- 編寫JQ的文檔加載事件
- 啟動定時器 setTimeout("",3000);
- 編寫顯示廣告的函數(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. 啟動定時器 setTimeout("",3000);
4. 編寫顯示廣告的函數(shù)
5. 在顯示廣告里面再啟動一個定時器
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>
以上就是本文的全部內(nèi)容，希望對大家的學(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ù)功能(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
jQuery 開發(fā)者應(yīng)該注意的9個錯誤,使用jquery的朋友可以參考下2012-05-05
jquery+CSS實(shí)現(xiàn)的水平布局多級網(wǎng)頁菜單效果
這篇文章主要介紹了jquery+CSS實(shí)現(xiàn)的水平布局多級網(wǎng)頁菜單效果,涉及jquery頁面元素屬性動態(tài)變換效果實(shí)現(xiàn)技巧,非常具有實(shí)用價值,需要的朋友可以參考下2015-08-08
jQuery使用fadeout實(shí)現(xiàn)元素漸隱效果的方法
這篇文章主要介紹了jQuery使用fadeout實(shí)現(xiàn)元素漸隱效果的方法,實(shí)例分析了jQuery中fadeout方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
本文主要介紹了使用jQuery操作DOM的方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
利用jquery和BootStrap實(shí)現(xiàn)動態(tài)滾動條效果
這篇文章主要介紹了利用jquery和BootStrap實(shí)現(xiàn)動態(tài)滾動條效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
jquery ajax提交表單數(shù)據(jù)的兩種方式
貌似AJAX越來越火了，作為一個WEB程序開發(fā)者要是不會這個感覺就要落伍，甚至有可能在求職的時候?qū)冶惶蕴?。我也是一個WEB程序開發(fā)者，當(dāng)然我也要“隨波逐流”一把，不然飯碗不保啊！2009-11-11
基于jquery實(shí)現(xiàn)的一個選擇中國大學(xué)的彈框 (數(shù)據(jù)、步驟、代碼)
基于jquery實(shí)現(xiàn)的一個選擇中國大學(xué)的彈框，需要的朋友可以參考下2012-07-07
使用JQuery庫提供的擴(kuò)展功能實(shí)現(xiàn)自定義方法
如何沒有任何一個庫可以滿足所有的需求，可以使用JQuery庫提供的擴(kuò)展功能，下面有個示例，大家可以看看2014-09-09
基于jQuery實(shí)現(xiàn)的圖片切換焦點(diǎn)圖整理
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的圖片切換焦點(diǎn)圖整理,需要的朋友可以參考下2014-12-12