JavaScript實現(xiàn)簡單的彈窗效果
本文實例為大家分享了JavaScript實現(xiàn)彈窗效果的具體代碼，供大家參考，具體內容如下
使用css動畫效果實現(xiàn)彈窗緩慢彈出和收回。
使用JavaScript實現(xiàn)定時彈出定時收回。
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>簡單彈窗</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.cgvv.com.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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. Python調用接口合并Excel表代碼實例2. .net如何優(yōu)雅的使用EFCore實例詳解3. Python快速將ppt制作成配音視頻課件的操作方法4. ASP.Net Core對USB攝像頭進行截圖5. 一文透徹詳解.NET框架類型系統(tǒng)設計要點6. 通過CSS數(shù)學函數(shù)實現(xiàn)動畫特效7. ASP.NET MVC使用Boostrap實現(xiàn)產品展示、查詢、排序、分頁8. 通過Ajax方式綁定select選項數(shù)據(jù)的實例9. ASP.NET MVC實現(xiàn)橫向展示購物車10. ajax動態(tài)加載json數(shù)據(jù)并詳細解析
網公網安備