JavaScript實(shí)現(xiàn)簡(jiǎn)單的彈窗效果
更新時(shí)間：2020年05月19日 08:30:50 作者：安心寫bug
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)彈窗效果的具體代碼，供大家參考，具體內(nèi)容如下
使用css動(dòng)畫效果實(shí)現(xiàn)彈窗緩慢彈出和收回。
使用JavaScript實(shí)現(xiàn)定時(shí)彈出定時(shí)收回。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡(jiǎn)單彈窗</title>
<style>
* {
margin: 0;
padding: 0;
}
.pop {
width: 400px;
height: 300px;
position: fixed;
bottom: 0;
right: 0;
display: none;
animation: pop 1s ease-in-out 0s;
}
@keyframes pop {
from {
height: 0;
}
to {
height: 300px;
}
}
.down {
width: 400px;
height: 0;
position: fixed;
bottom: 0;
right: 0;
display: block;
animation: out 1s ease-in-out;
}
@keyframes out {
from {
height: 300px;
}
to {
height: 0;
}
}
.img1 {
width: 400px;
height: 300px;
vertical-align: top;
}
</style>
</head>
<body>
<div class="pop" id="pop">
<img src="images/01.jpg" alt="" class="img1">
</div>
</body>
<script>
window.onload = function () {
timer = window.setInterval(imgBlock, 2000);
};
function imgBlock() {
var pop = document.getElementById('pop');
pop.style.display = 'block';
timer2 = window.setInterval(imgNone,5000);
}
function imgNone() {
var pop = document.getElementById('pop');
pop.className = 'down';
clearInterval(timer);
clearInterval(timer2);
}
</script>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js彈出框、對(duì)話框、提示框、彈窗實(shí)現(xiàn)方法總結(jié)(推薦)
- js彈窗返回值詳解(window.open方式)
- js彈窗代碼 可以指定彈出間隔
- js退出彈窗代碼集合
- js點(diǎn)擊彈出div層實(shí)現(xiàn)可拖曳的彈窗效果
- JS彈窗 JS彈出DIV并使整個(gè)頁面背景變暗功能的實(shí)現(xiàn)代碼
- js調(diào)用父框架函數(shù)與彈窗調(diào)用父頁面函數(shù)的簡(jiǎn)單方法
- JS實(shí)現(xiàn)自定義彈窗功能
- 關(guān)于vue.js彈窗組件的知識(shí)點(diǎn)總結(jié)
- js實(shí)現(xiàn)彈窗插件功能實(shí)例代碼分享
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)彈出窗口效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Javascript 函數(shù)parseInt()轉(zhuǎn)換時(shí)出現(xiàn)bug問題
天測(cè)試的測(cè)出來的。parseInt(1.13*100)，實(shí)際返回值是112，下面有個(gè)示例，大家可以看看下2014-05-05
JavaScript導(dǎo)出Excel實(shí)例詳解
這篇文章主要介紹了JavaScript導(dǎo)出Excel的方法,以實(shí)例形式詳細(xì)分析了javascript將WEB頁面導(dǎo)出為EXCEL文檔的方法及相關(guān)的技巧說明,對(duì)于深入了解javascript編程原理有一定的借鑒價(jià)值,需要的朋友可以參考下2014-11-11
基于JavaScript實(shí)現(xiàn)驚艷的打字機(jī)效果
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript打造驚艷打字機(jī)效果,讓你的文字生動(dòng)躍動(dòng),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
彈窗對(duì)我們大家來說應(yīng)該都不陌生,這篇文章主要給大家介紹了關(guān)于小程序展示彈窗常見API的相關(guān)資料,主要包括showToast,?showModal,showLoading和showActionSheet,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了如何使用?JS?判斷用戶是否處于活躍狀態(tài),案例演示了如何獲取用戶活躍狀態(tài),時(shí)間閾值定為5秒,超出該閾值沒有操作表示非活躍,否則屬于正在活躍中,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細(xì)介紹了基于ionic實(shí)現(xiàn)下拉刷新功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
淺談使用splice函數(shù)對(duì)數(shù)組中的元素進(jìn)行刪除時(shí)的注意事項(xiàng)
下面小編就為大家?guī)硪黄獪\談使用splice函數(shù)對(duì)數(shù)組中的元素進(jìn)行刪除時(shí)的注意事項(xiàng)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
javascript下拉列表中顯示樹形菜單的實(shí)現(xiàn)方法
這篇文章主要介紹了javascript下拉列表中顯示樹形菜單的實(shí)現(xiàn)方法，需要的朋友可以參考下2015-11-11
在IE中還可以在onreadystatechange事件里進(jìn)行判斷等方法。2009-07-07