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 相关文章推荐
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
jquery ajax abort()的使用方法
Oct 28 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
react-native android状态栏的实现
Jun 15 Javascript
VUE脚手架具体使用方法
May 20 Javascript
js实现整体缩放页面适配移动端
Mar 31 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
PHP6 mysql连接方式说明
2009/02/09 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
PHP类的特性实例分析
2016/09/28 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
python算法学习之计数排序实例
2013/12/18 Python
python实现用户管理系统
2018/01/10 Python
python enumerate内置函数用法总结
2020/01/07 Python
Python实现括号匹配方法详解
2020/02/10 Python
python要安装在哪个盘
2020/06/15 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
中学教师师德承诺书
2014/05/23 职场文书
大四毕业生自荐书
2014/07/05 职场文书
工作失职自我检讨书
2015/05/05 职场文书
被告代理词范文
2015/05/25 职场文书
小英雄雨来观后感
2015/06/09 职场文书
法人代表资格证明书
2015/06/18 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
MySQL慢查询的坑
2021/04/28 MySQL
Nginx反向代理配置的全过程记录
2021/06/22 Servers
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android