JavaScript实现简单的弹窗效果
本文实例为大家分享了JavaScript实现弹窗效果的具体代码，供大家参考，具体内容如下
使用css动画效果实现弹窗缓慢弹出和收回。
使用JavaScript实现定时弹出定时收回。
<!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='https://www.haobala.com/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. IntelliJ IDEA设置条件断点的方法步骤2. IntelliJ IDEA调整字体大小的方法3. IntelliJ IDEA设置默认浏览器的方法4. 一个用xslt样式将xml解析为xhtml的类TransformBinder（兼容FF和IE7.0）5. python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)6. python中使用np.delete()的实例方法7. Python 统计列表中重复元素的个数并返回其索引值的实现方法8. python glom模块的使用简介9. ASP.NET MVC使用正则表达式验证手机号码10. python实现图像，视频人脸识别(opencv版)
网公网安备