JavaScript实现简单的弹窗效果


Posted in Javascript onMay 19, 2020

本文实例为大家分享了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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
jquery select选中的一个小问题
Oct 11 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
js控制div弹出层实现方法
May 11 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
Angular.JS中的this指向详解
May 17 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
js实现自定义右键菜单
May 18 #Javascript
微信小程序手动添加收货地址省市区联动
May 18 #Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 #Javascript
django简单的前后端分离的数据传输实例 axios
May 18 #Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 #Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 #Javascript
react 生命周期实例分析
May 18 #Javascript
You might like
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
PHP URL路由类实例
2013/11/12 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python实现二分法算法实例
2015/02/02 Python
浅谈Python的文件类型
2016/05/30 Python
Python中pillow知识点学习
2018/04/30 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
.NET是怎么支持多种语言的
2015/02/24 面试题
人力资源部培训专员岗位职责
2014/01/02 职场文书
《赶海》教学反思
2014/04/20 职场文书
三八妇女节活动总结
2014/05/04 职场文书
诉前财产保全担保书
2014/05/20 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
分享几种python 变量合并方法
2022/03/20 Python