JavaScript實(shí)現(xiàn)簡(jiǎn)單的彈窗效果
本文實(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 id='pop'> <img src='http://www.hdgsjgj.cn/bcjs/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>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Java使用Tesseract-Ocr識(shí)別數(shù)字2. Python使用urlretrieve實(shí)現(xiàn)直接遠(yuǎn)程下載圖片的示例代碼3. vue實(shí)現(xiàn)web在線聊天功能4. 基于vue 動(dòng)態(tài)菜單 刷新空白問題的解決5. 解決Android Studio 格式化 Format代碼快捷鍵問題6. python如何換行輸出7. Android打包篇:Android Studio將代碼打包成jar包教程8. SpringBoot+TestNG單元測(cè)試的實(shí)現(xiàn)9. python如何計(jì)算圓的面積10. 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問題
網(wǎng)公網(wǎng)安備