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 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>看完上述内容，是不是对JavaScript如何实现简单的弹窗效果有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。
当前名称：JavaScript如何实现简单的弹窗效果
转载注明：https://www.cdcxhl.com/article4/iggcie.html
成都网站建设公司_创新互联，为您提供域名注册、外贸建站、营销型网站建设、全网营销推广、搜索引擎优化、静态网站
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
